说在前面
由于前段时间,有人问我能不能弄个编辑器,直接复制代码生成静态页面html,我考虑了考虑就随便写了一个。
本程序基本是采用官方文档,然后结合SpringBoot来集成一下,很简单,因为官方并没有提供java版本的,只有JSP程序版本的,所以,页面依旧保留JSP技术,上传文件以及图片功能采用JAVA直译JSP过来的代码。
其实JSP就是Java,只是语法上不同,其本质编译后依旧是java。
KindEditor
简介
KindEditor使用JavaScript编写,可以无缝的于Java、.NET、PHP、ASP等程序接合。 KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用,2006年7月首次发布2.0以来,KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率,目前在国内已经成为最受欢迎的编辑器之一。
当然,我也是看到我们以前系统有,我才用他的,说他老,但是还能用,说他功能强大,其实够用了。
主要特点
1. 体积小,加载速度快,但功能十分丰富。
2. 内置自定义range,完美地支持span标记。
3. 基于插件的方式设计,所有功能都是插件,增加自定义和扩展功能非常简单。
4. 修改编辑器风格很容易,只需修改一个CSS文件。
5. 支持大部分主流浏览器,比如IE、Firefox、Safari、Chrome、Opera。
官方下载
http://kindeditor.net/down.php
最新源码
创建程序
首先创建一个简单的SpringBoot 集成JSP的,我前面应该有说过,感觉忘记的可以点一下链接:
https://blog.csdn.net/Soinice/article/details/82590134
代码结构
开发技术
后端:SPringBoot
前端:JSP+KindEditor
所以,咱们只保留下载下来源码中关于JSP 的部分,如图
在pom.xml加入相关依赖
在新建的SpringBoot项目下,新建webapp,WEB-INF文件夹,把整个jsp复制过来;
只保留第一个demo.jsp,剩余两个jsp,咱们采用java来编写。
打开lib包,发现需要以下三个jar,所以在pom中加入:
在resource引入KindEditor
将下载下来的完整包 KindEditor保留需要的之后整体复制到resource下,且保留一个 kindeditor.js,名字随意。
编写jsp页面
整个demo.jsp,jsp部分不用修改,直接粘贴,html部分,依个人需要进行修改。我这将create js提取出来单独封装成operationDocument.js
operationDocument.jsp
在需要显示编辑器的位置添加textarea输入框。
官方Note
- 在textarea里设置HTML内容即可实现编辑,在这里需要注意的是,如果从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容,则必须转换HTML特殊字符(>,<,&,”)。具体请参考各语言目录下面的demo.xxx程序,目前支持ASP、ASP.NET、PHP、JSP。
- 在有些浏览器上不设宽度和高度可能显示有问题,所以最好设一下宽度和高度。宽度和高度可用inline样式设置,也可用 编辑器初始化参数 设置。
结果页content.jsp
operationDocument.js
配置上传参数,uploadJson和fileManagerJson,java版本的官方提供了两个jsp,这边我将改成UpdateController,源码可看文章底部。
编写Controller
这边新写了一个路由,作为jsp页面的跳转。
新增文案,需要提供三个参数,
content:代码,html内容
dirPath:保存路径
fileName:生成文件名称(随机生成)
这边同时,我将makeHtml封装成一个Util类:
配置application.properties
页面访问(项目启动)
页面查看
浏览器输入:http://localhost:8080/documentManage/operationDocument
输入文件保存的路径,开启编码模式,点击提交内容,会调用上传方法,并且自动生成HTML保存到指定的路径。
本地文件查看
打开生成的文件
ok,大功告成。
文件上传
图片上传
点击提交之后会默认保存在指定位置,同样文件名称也是随机生成。
文件上传
同样和图片保存的方法类似,生成地址名称为随机,如图:
总结
其实我是为了给懒人用的,不懂技术的,或者懒得用ide的,可以看成一个超级轻量级的 静态代码编辑器,啊哈哈~
源码下载
恩,去下载吧,
工具类下载:https://download.csdn.net/download/soinice/10724602
上传文件以及图片下载:https://download.csdn.net/download/soinice/10724591