KindEditor 图片上传插件应用

KindEditor 图片上传插件应用

imageUploadJson的参数action这个我们还没有写呢!不要着急,如果你急的已经部署打开了该页面你会发现缺了三个图标,那是我们以后文章中实实在在写的三个插件的图标。
css教程Path : 'css/ke.css' 这个是编辑器内容里的一些自定义的样式,比如我们要写引用文本插件,代码高亮插件的时候就用得着了!暂时别急,写上了就写上了也没什么问题。我们稍后完成!
第二步写我们的重中之重的action:
首先声明下我访问action的时候结尾不是以action结尾的,我是以do结尾的(你喜欢什么就配什么,改不改无所谓!菜鸟别纠结这个问题),在struts中怎么配置为.do结尾滴呢?
顺便给菜鸟补下课:
在src根目录下创建struts.properties文件,内容为:struts.action.extension=do即可大功告成!!!哇哈哈,简单嘛?
然后参考解压包jsp教程/upload_json.jsp,接下来我们要将其转换成action
第一步直接写类吧:
怎么写?为什么有人说拿不到request的任何参数?还说是KindEditor或Struts2的Bug?污蔑!纯属污蔑,误人子弟的人们最可恨!
废话下:struts2对文件上传进行了包装,也就是说你可以直接拿到页面中的file!不需要像写Servlet那样写了!
好直接复制upload_json.jsp的代码到action中吧?然后改改?
我们要记得在struts2中action获取文件的时候: 页面<input type="file" name="imgFile">(

<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
 String path = request.getContextPath();
 String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <head>
   <base href="<%=basePath%>">

   <title>KindEditor示例</title>
   <link rel="shortcut icon" type="image/x-icon" href="./favicon.png" />
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta http-equiv="pragma" content="no-cache">
   <meta http-equiv="cache-control" content="no-cache">
   <meta http-equiv="expires" content="0">
<script src="<%=basePath%>js/jquery.js" type="text/网页特效"></script>
<script src="<%=basePath%>js/kindeditor.js" type="text/javascript"></script>
<script type='text/javascript'>
<!--
$(document).ready(function(){
 KE.show({
  id : 'content',
  resizeMode : 1,
  shadowMode : false,
  allowPreviewEmoticons : false,
  allowUpload : true,
  syncType : 'auto',
  urlType : 'domain',
  cssPath : 'css/ke.css',
  imageUploadJson : '<%=basePath%>fileUpDown/onUploadImg.do',
  items : [ 'bold', 'italic', 'underline', 'strikethrough',
    'removeformat', '|', 'insertorderedlist',
    'insertunorderedlist', '|', 'textcolor', 'bgcolor',
    'fontname', 'fontsize', '|', 'link', 'unlink',
    'emoticons', 'code', 'image', 'flash', 'quote',
    'attach', '|', 'selectall', 'source', 'about' ],
  afterCreate : function(id) {
   KE.event.ctrl(document, 13, function() {
    if(KE.isEmpty('content')){
     alert('文章为空');
    }else{
    KE.util.setData(id);
    document.forms['editform'].submit();
    }
   });
   KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {
    if(KE.isEmpty('content')){
     alert('文章为空');
    }else{
    KE.util.setData(id);
    document.forms['editform'].submit();
    }
   });
  }
 });
});

var check={
  form_submit:function(){
   if(KE.isEmpty('content')){
    alert('文章为空');
    return false;
   }else{
    return true;
   }
  }
 };
//-->
</script>
  </head>
  <body>
   <form id="editform" name="editform" action="article/showDemo_DemoEditContent.do" method="post" onsubmit="return check.form_submit();">
    <textarea id="content" name="content" style="width: 580px; height: 250px; visibility: hidden;"></textarea>
    <br />
    您当前输入了
    <span id="word_count1">0</span> 个文字。(字数统计包含HTML代码。)
    <br />

    您当前输入了
    <span id="word_count2">0</span> 个文字。(字数统计包含纯文本、IMG、EMBED,不包含换行符,IMG和EMBED算一个文字。)
    <br />
    <button id="id_submit">
     提交
    </button>(提交快捷键: Ctrl + Enter)
    <br />
    <input type="button" name="button" value="取得HTML" onclick="javascript:alert(KE.html('content'));" />
    <input type="button" name="button" value="判断是否为空" onclick="javascript:alert(KE.isEmpty('content'));" />
    <input type="button" name="button" value="取得文本" onclick="javascript:alert(KE.text('content'));" />
    <input type="button" name="button" value="取得文本(包含img,embed)"
     onclick="javascript:alert(KE.util.getPureData('content'));" />
    <input type="button" name="button" value="取得选中HTML" onclick="javascript:alert(KE.selectedHtml('content'));" />
    <br />
    <br />
    <input type="button" name="button" value="设置HTML"
     onclick="javascript:KE.html('content', '<h3>Hello KindEditor</h3>');" />
    <input type="button" name="button" value="设置文本"
     onclick="javascript:KE.text('content', '<h3>Hello KindEditor</h3>');" />
    <input type="button" name="button" value="插入HTML"
     onclick="javascript:KE.insertHtml('content', '<strong>测试内容</strong>');" />
    <input type="button" name="button" value="添加HTML"
     onclick="javascript:KE.appendHtml('content', '<strong>Append HTML</strong>');" />
    <input type="button" name="button" value="清空内容" onclick="javascript:KE.html('content', '');" />
   </form>
  </body>
</html>

时间: 2024-12-02 06:25:09

KindEditor 图片上传插件应用的相关文章

jsp:kindeditor图片上传错误的问题

问题描述 jsp:kindeditor图片上传错误的问题 图片上传成功,但是总是返回上传错误的页面,如下: {"error":0,"url":"/test/attached/image/201412/20141219093827_456.jpg"} 解决方案 你的这个是上传成功返回的数据,会弹出错误页面? 解决方案二: 嗯 我看文档说返回0是上传成功,但是我的就是图片上传成功了.但是返回上传错误界面 解决方案三: 嗯 我看文档说返回0是上传成功,

解决KindEditor图片上传路径问题

一.需求 通过wordpress下的kindeditor插件自带的图片上传功能实现带<a></a>标签的链接.即由<img src="/wp-content/uploads/2015/03/test.jpg" alt="" />更改为<a href="http://www.111cn.net /2015/03/test.jpg"><img src="http://www.111cn.

图片上传插件jquery.uploadify详解_javascript技巧

1.js代码: 复制代码 代码如下: <script type="text/javascript"> $(document).ready(function() { $('#fileInput').uploadify({ //以下参数均是可选 'uploader' : '<%=basePath%>images/uploadify.swf', //指定上传控件的主体文件,默认'uploader.swf' 'script' : '<%=basePath%>

KindEditor图片上传的Asp.net代码实例_实用技巧

复制代码 代码如下: using System;using System.Globalization;using System.Collections;using System.Configuration;using System.Data;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;u

jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)_jquery

特点: 1.不依赖与jquery 2.而且,好看些吧..支持很多实例,上传成功后.会有一个回调函数.比如缩略图地址显示出来  用法:   复制代码 代码如下:  <link href="http://fineuploader.com/source/fineuploader-3.9.1.min.css" rel="stylesheet" /><script src="http://fineuploader.com/source/fineup

Jquery uploadify图片上传插件无法上传的解决方法_jquery

首先你确定你使用的插件的版本,版本不同,产生的问题也不同,我用的是3.2.1的版本,我前几天已经做好的功能今天运行的时候出错了,搞了半天也不知道那错了,最好仔细寻找,原来是jquery库的引入问题,可能是我引入的包版本低了,我换了一个js库立马好了,真是坑爹啊,谁需要这个demo的可以邮件我!

kindeditor 图片上传后生成带域名绝对路径配置方法

关键在于初始化kindeditor时指定以下参数: urlType "" 空为不修改URL "relative" 相对路径 "absolute" 绝对路径 "domain" 带域名的绝对路径. 例子:    代码如下 复制代码 htmlEditor = K.create( '#content', { uploadJson : '../kindeditor/jsp/upload_json.jsp', fileManagerJso

在php中使用jquery uploadify进行多图片上传

  jquery uploadify是一款Ajax风格的批量图片上传插件,在PHP中使用jquery uploadify很方便,请按照本文介绍的方法和步骤,为你的PHP程序增加jquery uploadify插件的批量上传图片功能. 本文是以dilicms为基础,为其增加图片上传功能. 1.增加数据表dili_fieldtypes新字段:k=>image,V=>图片上传区域(VACHAR); 2.修改application/libraries/dili/Field_behavior.php,在

AspNet中使用JQuery上传插件Uploadify详解_jquery

首先按下面的步骤来实现一个简单的上传功能. 1 创建Web项目,命名为JQueryUploadDemo,从官网上下载最新的版本解压后添加到项目中. 2 在项目中添加UploadHandler.ashx文件用来处理文件的上传. 3 在项目中添加UploadFile文件夹,用来存放上传的文件. 进行完上面三步后项目的基本结构如下图: 4 Default.aspx的html页的代码修改如下: <html xmlns="http://www.w3.org/1999/xhtml">