代码结构开发技术：KindEditor简介(KindEditor+KindEditor)简介

　　代码结构开发技术：KindEditor简介(KindEditor+KindEditor)简介

　　在前面说话

　　因为前段时间有人问我能不能拿个编辑器直接复制代码生成静态页面html。想了想，随便写了一篇。

　　这个程序基本都是使用官方文档，然后与SpringBoot集成。很简单，因为官方没有提供java版本，只有JSP程序版本，所以页面还是保留了JSP技术，上传文件和图片功能JAVA直接从JSP翻译过来的代码。

　　JSP其实就是Java，只是语法不同，编译后本质还是Java。

　　KindEditor 介绍

　　KindEditor 是用 JavaScript 编写的，可以与 Java、.NET、PHP、ASP 等程序无缝集成。 KindEditor 非常适合在cms、商场、论坛、博客、Wiki、电子邮件等互联网应用中使用。自2.0 于2006 年7 月首次发布以来，KindEditor 以其出色的用户体验和领先技术的市场占有率已成为中国最受欢迎的编辑器之一。

　　当然，我也看到我们以前的系统有，所以就只用了。我说它是旧的，但它仍然可以使用。我说它很强大，但实际上已经足够了。

　　主要特点

　　1. 体积小，加载速度快，但用途广泛。

　　2. 内置自定义范围，完美支持span标签。

　　3. 是基于插件设计的。所有功能都是插件。添加自定义和扩展功能非常简单。

　　4.修改编辑器样式很容易，只需要修改一个CSS文件即可。

　　5. 支持大部分主流浏览器，如 IE、Firefox、Safari、Chrome、Opera。

　　官方下载

　　最新源码

　　

　　创建程序

　　首先创建一个简单的SpringBoot集成JSP，我之前应该说过，如果你觉得忘记可以点击链接：

　　代码结构

　　

　　开发技术

　　后端：SPringBoot

　　前端：JSP+KindEditor

　　所以，我们只保留下载的源代码中关于JSP的部分，如图

　　

　　在 pom.xml 中添加相关依赖

　　在新创建的SpringBoot项目下，新建一个webapp，WEB-INF文件夹，复制整个jsp；

　　

　　只保留第一个demo.jsp，剩下两个jsp，我们用java来写。

　　打开lib包，发现需要以下三个jar，所以添加到pom中：

　　

　　

　　在资源中引入 KindEditor

　　

　　将下载的完整包KindEditor保存后复制到资源中，并保留一个任意名称的kindeditor.js。

　　

　　编写jsp页面

　　整个demo.jsp，jsp部分不需要修改，直接粘贴即可，根据个人需要修改html部分。我把create js解压出来单独打包成operationDocument.js

　　操作文档.jsp

　　在需要显示编辑器的地方添加一个textarea输入框。

　　

　　

　　官方说明

　　结果页 content.jsp

　　

　　operationDocument.js

　　配置上传参数，uploadJson和fileManagerJson，java版本官方提供了两个jsp，这里我改成UpdateController，源码见文章底部。

　　

　　

　　

　　写控制器

　　

　　这里写了一个新的路由作为跳转到jsp页面。

　　添加副本需要提供三个参数，

　　内容：代码、html内容

　　dirPath：保存路径

　　fileName：生成的文件名（随机生成）

　　

　　同时，我把makeHtml封装成一个Util类：

　　

　　配置 application.properties

　　

　　页面访问（项目启动）页面查看

　　浏览器输入：8080/documentManage/operationDocument

　　

　　输入文件保存路径，开启编码模式，点击提交内容，会调用上传方法，自动生成HTML并保存到指定路径。

　　

　　查看本地文件

　　

　　打开生成的文件

　　

　　好的，你完成了。

　　文件上传和图片上传

　　

　　点击提交后，会默认保存在指定位置，文件名也是随机生成的。

　　

　　文件上传

　　

　　与保存图片的方法类似，生成的地址名称是随机的，如图：

　　

　　总结

　　其实我用它来优采云。不懂技术或者懒得用ide的都可以算是超轻量级的静态代码编辑器了，哈哈~

　　源代码下载

　　好吧，去下载它，

　　工具下载：

　　上传文件和下载图片：