zoukankan      html  css  js  c++  java
  • easyUI整合富文本编辑器KindEditor详细教程(附源码)

    原因

    在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那时起,ssm项目中所使用的富文本编辑器都是UEditor。

    文章的末尾也说了UEditor的一些坑:遮罩层问题,初始化和对象销毁的问题,图片上传配置,官方jar包也有问题(貌似官方在mavne仓库没有jar包)

    虽然解决了大部分,不过用着依然不是很舒服,中间也想过换一个,但是本人实在有些懒,直到前几天才把另外一个富文本编辑器KindEditor整合进perfect-ssm项目里来。

    log

    简介与比较

    KindEditor使用JavaScript编写,可以无缝的于Java、.NET、PHP、ASP等程序接合。 KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用,2006年7月首次发布2.0以来,KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率,目前在国内已经成为最受欢迎的编辑器之一。

    这是KindEditor整合进perfect-ssm项目中的效果图:
    kindeditor

    这是之前的UEditor编辑器效果图:
    ueditor

    虽然看上去差别不大,而且对于页面功能来说也没有特别大的改动,但是真正使用起来还是觉得KindEditor更加简便一些(这是个人观点)。

    UEditor:

    • 功能更多
    • 样式更加清爽,显得朝气蓬勃
    • 用起来麻烦些
    • 坑比较多,不省心

    KindEditor:

    • 功能中规中矩,相对UEditor来说可能少一些
    • 样式有些老气
    • 整合简单
    • 没有太多的坑,省心

    为什么会有这个对比呢?是因为最近写一个项目的时候,试着在项目中整合了UEditor编辑器,它的功能虽然多,不过其中很大一部分基本用不到,而且这个玩意儿总是时不时的冒出来一个问题,再想想perfect-ssm项目整合了之后也有朋友会时不时的反馈一些问题,后来就直接弃掉换成了KindEditor,虽然功能不多,但是对于很多项目来说应该都足够了,而且用起来真的很省心,一次整合,再也不用做其他处理了。

    整合和配置

    • 1.首先下载KindEditor编辑器,使用的是4.1.10版本,下载地址:http://kindeditor.net/down.php

    • 2.将静态文件放置到项目目录中
      p-k

    • 3.在文章页面引入KindEditor相关js文件:

        <!--引入引入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.在文章页面上创建id为editor的<textarea>元素,如下所示:
    <textarea id="editor" style="600px;height:400px;visibility:hidden;">
    </textarea>
    
    //这里直接设置了宽高的值,另外一种方法是在KindEditor初始化时通过width属性设置。
    
    • 5.在文章页面创建KindEditor(参数都是可选的,根据实际需要进行设置即可):
    <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.页面逻辑完善

    添加文章时将编辑器中的内容赋值给文章的content属性:

    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}
            ...
            ...
    

    修改文章时将编辑器中的内容修改为文章的content属性值:

    function openArticleModifyDialog() {
            ...
            ...
            editor.html(row.articleContent);
        }
    

    编辑框关闭时,将编辑器清空,不然会显示上一次的内容:

        function resetValue() {
            $("#title").val("");
            editor.html();
            ...
            ...
        }
    
    • 7.后端接口功能完善

    由于文章模块是开发好的功能,因此后端代码并没有改动,这次的修改只是增加了KindEditor,其他代码并没有做任何更改。

    perfect-ssm现在的菜单栏变成了这样:
    nav

    有兴趣的朋友可以去比较一下,我暂时先将KindEditor设置为推荐了。

    结语

    perfect-ssm项目中增加了一个富文本编辑器KindEditor,这个编辑器相比较于原来的UEditor更加容易整合,相比较UEditor而言的话,KindEditor的问题和坑少一些,不过呢,类似的编辑器还是很多的,选择适合自己的就好。

    首发于我的个人博客,项目演示地址:perfect-ssm,登录账号:admin,密码:123456

    如果有问题或者有一些好的创意,欢迎给我留言,也感谢向我指出项目中存在问题的朋友。

    如果你想继续了解该项目可以查看整个系列文章Spring+SpringMVC+MyBatis+easyUI整合系列文章,也可以到我的GitHub仓库或者开源中国代码仓库中查看源码及项目文档。

  • 相关阅读:
    windows系统切换jdk,修改java_home无效情况
    Cannot instantiate interface org.springframework.context.ApplicationListener
    MySQL分组查询获取每个学生前n条分数记录(分组查询前n条记录)
    ASP.NET Web API 使用Swagger生成在线帮助测试文档,支持多个GET
    EF TO MYSQL 无法查询中文的解决方法
    HttpWebRequest post请求获取webservice void数据信息
    This implementation is not part of the Windows Platform FIPS validated cryptographic algorithms. 此实现不是 Windows 平台 FIPS 验证的加密算法的一部分 解决方案
    MySQL 5.7.13解压版安装记录 mysql无法启动教程
    C# udpclient 发送数据断网后自动连接的方法
    汽车XX网站秒杀抢购代码
  • 原文地址:https://www.cnblogs.com/han-1034683568/p/7930542.html
Copyright © 2011-2022 走看看