简化开发流程--UEditor富文本编辑器

为了减少开发成本，简化开发流程。百度为开发者们提供了一款UEditor文本编辑器，下面我们一起来学习如何使用UEditor进行开发。

这里是UEditor的下载地址：https://ueditor.baidu.com/website/download.html#ueditor

首先选择下载版本，我选择的是JSP版本。
将下载文件解压缩后，导入到项目中
在页面中引入以下script标签，注意路径

<script type="text/javascript" charset="utf-8" src="lib/ueditor1_4_3_3-utf8-jsp/utf8-jsp/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="lib/ueditor1_4_3_3-utf8-jsp/utf8-jsp/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="lib/ueditor1_4_3_3-utf8-jsp/utf8-jsp/lang/zh-cn/zh-cn.js"></script>

实例化编辑器

var ue = UE.getEditor('editor');

运行项目，页面中就可以显示出编辑器。
现在实现请求后台添加接口，将编辑器中的内容添加到数据库中。

function request(){
        var my_ue = ue.getContent();
        var obj = {
            content:my_ue
        };
        console.log(JSON.stringify(obj));
        $.ajax({
            url: 'http://localhost:8081/addUserInfo',//添加接口
            type: 'POST',
            dataType: 'json',
            contentType: "application/json",
            async: false,
            data: JSON.stringify(obj),
            xhrFields: {
                withCredentials: true
            },
            success: function (result) {
                if(result.code == 666){
                    alert("提交成功！");
                }
            },
            error: function (XMLHttpRequest) {
                if(XMLHttpRequest.code == 20001) {
                    console.log('XMLHttpRequest:' + XMLHttpRequest);
                    alert("提交失败！");
                }
            }
        });
    }

我随便在页面上粘贴了两条新闻，依次点击提交，提交成功后，可以在数据库中看到。
现在在另一个页面中请求一下后台数据。根据ID进行查询。

function loginChen(){
            var textid =document.getElementById("id").value;
            var obj = {
                id:textid
            };
            $.ajax({
                url: 'http://localhost:8081/selectPerson',//文本查询接口
                type: 'POST',
                dataType: 'json',
                data: JSON.stringify(obj),
                contentType: "application/json;charset=utf-8",
                success: function (ret) {
                        console.log("哈哈" + JSON.stringify(ret));
                        alert("发送成功！");
                        var aaa;
                        aaa = '<div>'+ ret.data.content +'</div>';
                        $("#title").html(aaa);
                },
                error: function (XMLHttpRequest) {
                    console.log('XMLHttpRequest:'+XMLHttpRequest);
                    alert("请求失败！");
                }
            });
        }

在页面里我固定好的容器中，打印出请求的数据。

请求出来后，样式是和上传时一样的。
10. 我们再来学习一下如何调整ueditor工具栏
ueditor功能强大，但是有些功能我们是用不到的，可以在ueditor.config.js中配置。搜索"toolbars"找到工具栏配置项，删掉不必要的功能就可以了。

,toolbars: [[

'undo', 'redo' , '|',

'bold', 'forecolor' , 'removeformat', 'autotypeset', 'pasteplain' , '|', '|',

'justifyleft', 'justifycenter' , '|',

'link', 'unlink' ,  '|',

'insertimage', 'insertvideo' , '|',

'wordimage', '|' ,

'inserttable', 'insertrow' , 'deleterow', 'insertcol', 'deletecol' , 'mergecells', 'splittocells', '|' , 'mybtn1','mydialog1'

        ]]

如果想修改编辑器默认的字体等，可以找打开ueditor.all.js，搜索editor.js中的"render:"方法，修改以下部分：

var html = ( ie && browser.version < 9  ? '' : '<!DOCTYPE html>') +

                    '<html xmlns=\'http://www.w3.org/1999/xhtml\' class=\'view\' ><head>' +

                    '<style type=\'text/css\'>' +

                    //设置四周的留边

                    '.view{padding:0;word-wrap:break-word;cursor:text;height:90%;}\n' +

                    //设置默认字体和字号

                    //font-family不能呢随便改，在safari下fillchar会有解析问题

                    'body{margin:8px;font-family:sans-serif;font-size:16px;}' +

                    //设置段落间距

                    'p{margin:5px 0;}</style>' +

                    ( options.iframeCssUrl ? '<link rel=\'stylesheet\' type=\'text/css\' href=\'' + utils.unhtml(options.iframeCssUrl) + '\'/>' : '' ) +

                    (options.initialStyle ? '<style>' + options.initialStyle + '</style>' : '') +

                    '</head><body class=\'view\' ></body>' +

                    '<script type=\'text/javascript\' ' + (ie ? 'defer=\'defer\'' : '' ) +' id=\'_initialScript\'>' +

                    'setTimeout(function(){editor = window.parent.UE.instants[\'ueditorInstant' + me.uid + '\'];editor._setup(document);},0);' +

                    'var _tmpScript = document.getElementById(\'_initialScript\');_tmpScript.parentNode.removeChild(_tmpScript);</script></html>';

好，对于ueditor的内容先介绍到这里，因为我也是最近才开始摸索，所以还有很多不了解的地方，尤其是后端的配置项部分。过段时间我会整理下ueditor文档中的常用方法。

大家可以自行了解
这是地址：https://ueditor.baidu.com/doc/

简化开发流程--UEditor富文本编辑器

猜你喜欢