reason
In April of this year, I wrote an article on the integration of easyui with UEditor Spring+SpringMVC+MyBatis+easyUI integration and optimization (6) easyUI and rich text editor UEditor integration , since then, the rich text used in the ssm project Text editors are all UEditor.
At the end of the article, I also mentioned some pits of UEditor: mask layer problem, initialization and object destruction problem, image upload configuration, official jar package also has problems (it seems that there is no official jar package in the mavne warehouse)
Although most of it has been solved, it is still not very comfortable to use. I thought about changing it in the middle, but I was really lazy. I didn't integrate another rich text editor, KindEditor, into the perfect-ssm project until a few days ago.
Introduction and Comparison
KindEditor is written in JavaScript and can be seamlessly integrated with Java, .NET, PHP, ASP and other programs. KindEditor is very suitable for use in Internet applications such as CMS, shopping malls, forums, blogs, Wikis, emails, etc. Since the first release of 2.0 in July 2006, KindEditor has continuously expanded its editor market share by virtue of its excellent user experience and leading technology. It has become one of the most popular editors in China.
This is the rendering of KindEditor integrated into the perfect-ssm project:
This is the rendering of the UEditor editor before:
Although it doesn't seem to be much different, and there are no major changes to the page functions, it is still easier to use KindEditor (this is a personal opinion).
Editor:
- function more
- The style is more refreshing and looks vibrant
- more troublesome to use
- There are more pits, don't worry
KindEditor:
- The function is quite satisfactory, it may be less than UEditor
- The style is a bit old-fashioned
- Simple to integrate
- There are not too many pits, peace of mind
Why is there this comparison? It's because when I wrote a project recently, I tried to integrate the UEditor editor into the project. Although it has many functions, a large part of it is basically useless, and this thing always has a problem from time to time. Thinking about the perfect-ssm project after the integration, some friends will feedback some problems from time to time, and later they were abandoned and replaced with KindEditor. Although there are not many functions, it should be enough for many projects, and it is really useful. Very worry-free, once integrated, no other processing is required.
Integrate and configure
1. First download the KindEditor editor, using version 4.1.10, download address:
http://kindeditor.net/down.php2. Place static files in the project directory
3. Introduce KindEditor related js files on the article page:
<!--引入引入kindeditor编辑器相关文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/kindeditor-4.1.10/themes/default/default.css"/>
<script charset="utf-8" src="${pageContext.request.contextPath}/kindeditor-4.1.10/kindeditor-all.js"></script>
<script charset="utf-8" src="${pageContext.request.contextPath}/kindeditor-4.1.10/lang/zh_CN.js"></script>- 4. Create an element with an id of editor on the article page
<textarea>, as follows:
<textarea id="editor" style="width:600px;height:400px;visibility:hidden;">
</textarea>
//这里直接设置了宽高的值，另外一种方法是在KindEditor初始化时通过width属性设置。- 5. Create a KindEditor on the article page (parameters are optional, you can set them according to actual needs):
<script type="text/javascript">
$(function () {
//详情编辑器
KindEditor.ready(function (K) {
this.editor
= K.create('textarea[id="editor"]', {
items: ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'multiimage',
'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink'],
uploadJson: '/images',//指定上传图片的服务器端程序
fileManagerJson: '/images',//指定浏览远程图片的服务器端程序
allowFileManager: true
});
});
});
</script>- 6. Perfect page logic
When adding an article, assign the content in the editor to the article's contentproperty:
function saveArticle() {
var title = $("#title").val();
var addName = $("#addName").val();
var content = editor.html();
var id = $("#articleIdfm").val();
var data = {"id": id, "articleTitle": title, "articleContent": content, "addName": addName}
...
...When modifying an article, modify the content in the editor to the contentproperty value of the article:
function openArticleModifyDialog() {
...
...
editor.html(row.articleContent);
}When the edit box is closed, clear the editor, otherwise the last content will be displayed:
function resetValue() {
$("#title").val("");
editor.html();
...
...
}- 7. The back-end interface function is perfect
Since the article module is a developed function, the back-end code has not been changed. This time the modification is only to add KindEditor, and no other code has been changed.
The menu bar of perfect-ssm now looks like this:
Interested friends can compare, I temporarily set KindEditor to be recommended.
Epilogue
A rich text editor, KindEditor, has been added to the perfect-ssm project. Compared with the original UEditor, this editor is easier to integrate. Compared with UEditor, KindEditor has fewer problems and pits. However, similar editors are still There are many, just choose the one that suits you.
First published on my personal blog , project demo address: perfect-ssm , login account: admin, password: 123456
If you have any questions or have some good ideas, please leave me a message, and thank you for pointing out the problems in the project.
If you want to continue to learn about the project, you can view the entire series of articles on Spring+SpringMVC+MyBatis+easyUI integration series , or you can go to my GitHub repository or open source Chinese code repository to view the source code and project documentation.