demo项目开发笔录（UEditor实践）

最新推荐文章于 2022-11-24 17:32:42 发布

gcc_front

最新推荐文章于 2022-11-24 17:32:42 发布

阅读量515

点赞数

分类专栏： java 富文本编辑器

本文链接：https://blog.csdn.net/gcc_java/article/details/79613284

版权

java 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

富文本编辑器

1 篇文章 0 订阅

订阅专栏

这里记录一个文本编辑插件的使用：

UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。

这里笔者在完成“写文章”功能时使用了这个编辑插件，官方文档调用方式如下：

一，下载插件

二，调用如下：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
</head>
<body>
    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
</body>
</html>

打开网页如下：

下面说说笔者使用时的一些具体操作：

一，引用时多引用一个加载中文的js

<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="gbk" src="${pageContext.request.contextPath}/static/ueditor/lang/zh-cn/zh-cn.js"></script>

二，实例化编辑器时有选择的进行功能按钮的现实

<!-- 实例化编辑器 -->
        var ue = UE.getEditor('editor',{
            toolbars:[
                ['bold','indent','selectall','cleardoc','fontfamily','fontsize','emotion','justifyleft',
                'justifyright','justifycenter','justifyjustify']
            ]
        });

三，不直接在div内使用<script>标签，原因是：虽然不影响功能但会在idea编辑器中会报html节点标签未关闭的错误。

措施如下：

 <div id="editorDiv">
     <!-- 加载编辑器的容器 -->
 </div>

        $(document).ready(function () {
            var html = "<script id=editor name=content type=text/plain style=width:100%;height:500px;/>";
            $('#editorDiv').html(html);
        })

保存文章主要代码如下：

<%--主体--%>
        <div class="w3-col" style="width: 55%; margin-top: 1px;margin-bottom: 15px;">
            <div class="w3-container w3-white w3-round">
                <div class="w3-text-grey" style="margin-top: 5px">GCC > 创建新主题</div>
                <hr style="margin-top: 8px"/>
                <div class="w3-text-grey" style="margin-top: -15px"> 主题标题</div>
                <hr style="margin-top: 8px"/>
                <div style="margin-top: -10px">
                    <input class="w3-input" id="title" name="title" style="width: 100%;height: 35px " placeholder="请输入主题标题，如果标题能够表达完整内容，则正文写如题即可">
                </div>
                <div class="w3-text-grey" style="margin-top: 10px"> 正文</div>
                <hr style="margin-top: 8px"/>
                <div id="editorDiv">
                    <!-- 加载编辑器的容器 -->
                </div>
                <hr style="margin-top: 8px"/>
                <div style="margin-top: -10px">
                    <select id="typeId" class="w3-btn w3-white w3-border w3-card-2 w3-text-grey" style="width: 200px;text-align: left">
                        <option value="">请选择节点</option>
                        <option value="1">技术</option>
                        <option value="2">问与答</option>
                    </select>
                </div>
                <div style="text-align: center;margin-top: 10px;margin-bottom: 10px">
                    <input class="w3-btn w3-teal w3-small" style="width: 80px;" type="button" value="发布主题" οnclick="submitData()">
                </div>
            </div>
        </div>

    <%--js--%>
    <script>
        <!-- 实例化编辑器 -->
        var ue = UE.getEditor('editor',{
            toolbars:[
                ['bold','indent','selectall','cleardoc','fontfamily','fontsize','emotion','justifyleft',
                'justifyright','justifycenter','justifyjustify']
            ]
        });

        //保存文章
        function submitData(){
            var title=$("#title").val();
            var typeId=$("#typeId").val();
            var content=UE.getEditor('editor').getContent()
            if(title==null || title==''){
                alert("标题不能为空");
            }else if(typeId==null || typeId==''){
                alert("请选择节点");
            }else if(content==null || content==''){
                alert("内容不能为空");
            }else{
                $.post("${pageContext.request.contextPath}/saveArticle.html",
                    {	'title':title,
                        'typeId':typeId,
//                        'contentNoTag':UE.getEditor('editor').getContentTxt(),//纯文本内容，使用lucence分词的话需要
                        'content':content
//                        'summary':UE.getEditor('editor').getContentTxt().substr(0,155),//截取文章部分内容
                        },
                    function(result){
                        if(result.flag){
                            alert("发布成功");
                            resultValue();
                        }else{
                            alert("发布失败");
                        }
                    },"json");
            }
        }

        //清空
        function resultValue(){
            $("#title").val("");
            $("#typeId").val("");
            UE.getEditor('editor').setContent('');
        }

        $(document).ready(function () {
            var html = "<script id=editor name=content type=text/plain style=width:100%;height:500px;/>";
            $('#editorDiv').html(html);
        })
    </script>

后台方法如下：

    @RequestMapping("saveArticle")
    public String saveArticle(Article article, HttpServletResponse response) throws Exception {
        int resultTotal=0;
        if(article.getId()==null){
            resultTotal = articleService.saveArticle(article);
        }else {
            resultTotal = articleService.updateArticle(article);
        }
        JSONObject result = new JSONObject();
        if(resultTotal>0){
            result.put("flag", true);
        }else {
            result.put("flag", false);
        }
        ResponseUtil.write(response,result);
        return null;
    }

    public int saveArticle(Article article) {
        String id = UuidUntil.getUUID();
        article.setId(id);
        String currentDate = DateUntil.getCurrentDate("yy-MM-dd HH:mm");
        article.setPostTime(currentDate);
        return articleDao.saveArticle(article);
    }

笔者部分页面内容如下：