Kindeditor-4.1.10使用

kindeditor-4.1.10下载地址

kindeditor-4.1.10

kindeditor-4.1.10在JavaWeb工程中使用

kindeditor-4.1.10放到自己工程的目录下，一般位于WebRoot目录下面。开始kindeditor-4.1.10放入WebRoot中时，kindeditor-4.1.10文件下的有些文件时报错的，但是我们不能修改其中的报错的内容，在Eclipse应用程序中可以就报错的文件右击，选择Eclipse，在选择Exclude from Validation即可。

因为是JavaWeb工程，上传图片时注意点：

• 需要引入相关的3个jar包：
  
  • commons-fileupload.jar： 文件上传
  • commons-io.jar：流操作
  • json_simple.jar：json数据转换
• 需要修改kindeditor-4.1.10/jsp/upload_json.jsp文件

// 在upload_json.jsp文件的头部添加（如果没有）<%@ page import="org.apache.struts2.dispatcher.multipart.MultiPartRequestWrapper" %>//文件保存目录路径(Tomcat) 把最后的xx改为uploadString savePath = pageContext.getServletContext().getRealPath("/") + "upload/";//文件保存目录URL（工程下）String saveUrl  = request.getContextPath() + "/upload/";

• 在发布的服务器中的对应的工程中创建与上述修改为upload的同名的文件夹，这个可以在相应的程序中通过代码实现，即upload文件夹；同时在工程中相应的位置创建upload文件夹
• 在对应的JSP页面，添加下面的代码：

// 引入css/js<link rel="stylesheet" href="${pageContext.request.contextPath}/kindeditor-4.1.10/themes/default/default.css" />    <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/kindeditor-4.1.10/kindeditor-min.js"></script>    <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/kindeditor-4.1.10/lang/zh_CN.js"></script>// 编辑器在哪里起作用，同时控制图片等上传<script type="text/javascript" >        var editor;        KindEditor.ready(function(K) {            editor = K.create('textarea[name="content"]', {                uploadJson : 'kindeditor-4.1.10/jsp/upload_json.jsp',                fileManagerJson : 'kindeditor-4.1.10/jsp/file_manager_json.jsp',                allowFileManager : true,                allowImageUpload : true,                 autoHeightMode : true,                afterCreate : function() {this.loadPlugin('autoheight');},                afterBlur : function(){ this.sync(); }  //Kindeditor下获取文本框信息            });        });    </script>

kingeditor-4.1.10控件的增加、删除、修改等，有时间还需要研究。
上传图片时把远程上传去除，都没有起到作用，郁闷！
- 方案一：把kindeditor-4.1.10/plugins/images.js文件的showRemote = K.undef(options.showRemote, true),修改为showRemote = K.undef(options.showRemote, false),
- 方案二：把kindeditor-4.1.10/plugins/images.js文件的的下述代码注释或者删除

            //remote image - start            '<div class="tab1" style="display:none;">',            //url            '<div class="ke-dialog-row">',            '<label for="remoteUrl" style="width:60px;">' + lang.remoteUrl + '</label>',            '<input type="text" id="remoteUrl" class="ke-input-text" name="url" value="" style="width:200px;" /> &nbsp;',            '<span class="ke-button-common ke-button-outer">',            '<input type="button" class="ke-button-common ke-button" name="viewServer" value="' + lang.viewServer + '" />',            '</span>',            '</div>',            //size            '<div class="ke-dialog-row">',            '<label for="remoteWidth" style="width:60px;">' + lang.size + '</label>',            lang.width + ' <input type="text" id="remoteWidth" class="ke-input-text ke-input-number" name="width" value="" maxlength="4" /> ',            lang.height + ' <input type="text" class="ke-input-text ke-input-number" name="height" value="" maxlength="4" /> ',            '<img class="ke-refresh-btn" src="' + imgPath + 'refresh.png" width="16" height="16" alt="" style="cursor:pointer;" title="' + lang.resetSize + '" />',            '</div>',            //align            '<div class="ke-dialog-row">',            '<label style="width:60px;">' + lang.align + '</label>',            '<input type="radio" name="align" class="ke-inline-block" value="" checked="checked" /> <img name="defaultImg" src="' + imgPath + 'align_top.gif" width="23" height="25" alt="" />',            ' <input type="radio" name="align" class="ke-inline-block" value="left" /> <img name="leftImg" src="' + imgPath + 'align_left.gif" width="23" height="25" alt="" />',            ' <input type="radio" name="align" class="ke-inline-block" value="right" /> <img name="rightImg" src="' + imgPath + 'align_right.gif" width="23" height="25" alt="" />',            '</div>',            //title            '<div class="ke-dialog-row">',            '<label for="remoteTitle" style="width:60px;">' + lang.imgTitle + '</label>',            '<input type="text" id="remoteTitle" class="ke-input-text" name="title" value="" style="width:200px;" />',            '</div>',            '</div>',            //remote image - end

对kindeditor的控件还需研究