KindEditor4.1编辑器的使用、封装及扩展

小咪咪 2022-04-16 07:08 340阅读 0赞

web开发中。。少不了编辑器的使用。。经过各个编辑器的比较。个人认为 KindEditor4.1 编辑器非常的不错

觉得她简单而美丽....就像一个漂亮的妞。。。嘿嘿![Image 1][]。。。而且提供了API。。容易扩展。。

下面的我封装了 KindEditor4.1 的一些方法。。。让我们在开发中只要配置来实现就好了。。。

**附件中提供了 源码和jar   。。省的你们去反编译了。。嘿嘿。。。**

**1.将以下的JAR包放到工程的lib目录下  **

\* commons-fileupload-1.2.1.jar  
    \* commons-io-1.4.jar  
    \* kindeditorservlet.jar  --jkd1.6 下面编译的

**2.web.xml 的servlet及相关属性设置**

<servlet>
      <servlet-name>UploadSerlet</servlet-name>
      <servlet-class>
       com.yangpan.kindeditor.UploadSerlet
      </servlet-class>
      
      <init-param>
       <param-name>UPLOAD_PATH</param-name>
       <param-value>attached/</param-value>
      </init-param>
      
      <init-param>
       <param-name>Img_MAX_SIZE</param-name>
       <param-value>1024000</param-value>
      </init-param>
      <init-param>
       
       <param-name>Img_YPES</param-name>
       <param-value>gif,jpg,jpeg,png,bmp</param-value>
      </init-param>
      
      
      <init-param>
       <param-name>File_MAX_SIZE</param-name>
       <param-value>1000000</param-value>
      </init-param>
      
      <init-param>
       <param-name>File_TYPES</param-name>
       <param-value>doc,xls,ppt,zip,rar,txt</param-value>
      </init-param>
     </servlet>
     <servlet>
      <servlet-name>FileManagerServlet</servlet-name>
      <servlet-class>
       com.yangpan.kindeditor.FileManagerServlet
      </servlet-class>
      
      <init-param>
       <param-name>UPLOAD_PATH</param-name>
       <param-value>attached/</param-value>
      </init-param>
     </servlet>
     
     <servlet-mapping>
      <servlet-name>UploadSerlet</servlet-name>
      <url-pattern>/servlet/UploadSerlet</url-pattern>
     </servlet-mapping>
     <servlet-mapping>
      <servlet-name>FileManagerServlet</servlet-name>
      <url-pattern>/servlet/FileManagerServlet</url-pattern>
     </servlet-mapping>

**3.KE 相关属性设置**

KindEditor.ready(function(K) {
            editor = K.create('textarea[name="bean.content"]', {
         width : '680px',
         height: '250px',
         newlineTag : 'br',
         resizeType : 0,
         allowPreviewEmoticons : true,
         allowImageUpload : true,
         items : [
             'source', '|', 'undo', 'redo', '|', 'preview',
          'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
          'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
          'insertunorderedlist', '|', 'emoticons', 'image','multiimage', 'insertfile', 'link', 'table', 'wordpaste', 'clearhtml'],
          cssPath : '../kindeditor/plugins/code/prettify.css',
         uploadJson : '<%=path%>/servlet/UploadSerlet',
         fileManagerJson : '<%=path%>/servlet/FileManagerServlet',
         allowFileManager : false,
         afterCreate : function() {
          var self = this;
          K.ctrl(document, 13, function() {
           //self.sync();
           //document.forms['example'].submit();
           edit();
          }); 
         }
        });
        prettyPrint();
       });

**4.创建上传目录attached **

这样就完成了 ...Kindeditor的搭建。。。

**5.扩展--添加文件管理的删除功能---题外话**

在 目录中 找到 filemanager.js 文件...在约182中添加如下代码

K('<span style="float:left;width:30px; text-align:center;" ><a href="#">删除</a></span>').appendTo(div).click(function() {
    					//self.removeFile(file.id);
    					alert('ssss'+data.filename+"==="+themesPath);
    				});

在大约 194 行添加一个方法。

我想这样就可以实现删除的功能。。。具体还没有完成。。。先记着！！！！

实现的效果如：

图1：

![3491b1dc-cf4b-3e54-9306-20bf12d1efff.jpg][]

图2:

![667d2f81-ac93-3e9a-a67c-7b77f79c081f.jpg][]

我想。。如果可以的话。。我们就可以实现远程管理服务器的文件。。。这个功能是很实用的。。。。

大家可以下载附件 mi.rar   吧。。。如果你们扩展了。。记得告诉我啊啊啊啊啊！！

有疑问也可以大家一起交流QQ：609865047

我最近都没时间。。忙死啦！

[Image 1]: 
[3491b1dc-cf4b-3e54-9306-20bf12d1efff.jpg]: /images/20220416/cc8c53dab6564eed97d066e4750b356d.png
[667d2f81-ac93-3e9a-a67c-7b77f79c081f.jpg]: /images/20220416/7b613821423945ad8080affd6afe25b8.png