本文将阐述又一个常用的富文本插件kindeditor。
本文阐述如何从零开始构建ueditor的富文本插件。

1、环境约束

• idea2018.1.5
• maven-3.0.5
• jdk-8u162-windows-x64

2、源代码下载

官网【KindEditor 4.1.11】：
http://kindeditor.net/down.php
百度网盘：
链接：https://pan.baidu.com/s/1ihjBY3S7OvjEsYWZE1G4ng
提取码：9dsm

3、新建和拷贝工程

• 解压kindeditor-4.1.11-zh-CN.zip
• 在idea中创建一个web工程，并将tomcat之jar包设置到环境变量

• 按以下方式将解压好的文件夹拷贝到新建工程的web以及src，将web/jsp/lib中的jar包添加到环境变量：

   

  

   

  千万不要忘记点击File->Project Structure->Artifacts中的fix

   

  

  不要忘记fix

4、修改

• 修改web/jsp/demo.jsp中的第13行
  由原来的<script charset=”utf-8″ src=”../kindeditor.js”></script>
  变为<script charset=”utf-8″ src=”../kindeditor-all.js”></script>

   

  

  适配js文件

• 修改web/jsp/upload_json.jsp中的41~45行，确保文件夹不存在时会被创建
  由原来的

File uploadDir = new File(savePath);
if(!uploadDir.isDirectory()){
    out.println(getError("上传目录不存在，正在创建"));
    return;
}

变为

File uploadDir = new File(savePath);
if(!uploadDir.isDirectory()){
    uploadDir.mkdirs();
}

4、测试

• 以web/jsp/demo.jsp为启动页，开启tomcat
  启动之后按以下方式进行上传操作：

   

  

  上传文件

• 文件上传到哪里去了，我们通过查看浏览器的F12调试功能就能找到文件位置

   

  

  文件位置

至此，我们完成了从零开始对kindeditor的使用。