【前端】简单配置使用百度在线文本编辑器UEditor

我正在参加「掘金·启航计划」

在本篇文章中，我们讲一起了解下百度在线文本编辑器UEditor的简单配置使用
目前在线编辑器插件网上挺多的，个人觉得UEditor在UI和功能上还是不错的

1、编辑器的使用场景

1）论坛发帖

2）站内图文信息发布

3）购物类网站的产品图文编辑

注：对于购物类的产品而言，如果一套系统在多个设备上使用，一般不再使用图文编辑，只使用图片来代替图文，这样一个接口可以在小程序上使用也可以在web端网站上使用，如果是html，那么在小程序解析就麻烦点

2、下载好相关js和css

首先，就是下载好相关js和css，如下

百度在线编辑器地址

3、页面引入文件

Html页面内容，以及js和css的引用

<link href="/umeditor1_2_2-utf8-net/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <script src="/umeditor1_2_2-utf8-net/umeditor.config.js" type="text/javascript" charset="utf-8"></script>
    <script src="/umeditor1_2_2-utf8-net/umeditor.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/umeditor1_2_2-utf8-net/lang/zh-cn/zh-cn.js" type="text/javascript"></script>
 
<div class="online-edirot" style="display:none;width:100%;"></div>

4、初始化编辑器方法

初始化代码如下

 
<script type="text/javascript">
    $(function () {
 
        var paramData = {
            um: null,
            text: '',
            baiduEditor: function () {
                
                window.UMEDITOR_CONFIG.initialFrameWidth = "98%";
                window.UMEDITOR_CONFIG.initialFrameHeight = "500";
 
                //实例化编辑器
                $(".online-edirot").html();
                $(".online-edirot").append('<script type="text/plain" id="myEditor" class="input" style="width: 1000px; height: 240px;" data-novalue="请输入信息"><\/script>');
 
                if (paramData.um) {
                    UM.getEditor('myEditor').destroy(); //先清除再渲染
                    paramData.um = UM.getEditor('myEditor');
                }
                else
                    paramData.um = UM.getEditor('myEditor');
 
                paramData.um.setContent(paramData.text);
 
                $(".online-edirot").show();
            }
        }
 
        paramData.baiduEditor();
    });
</script>

5、效果如下

6、相关设置

在umeditor.config.js文件里

特别是imageUrl参数，一般会设置成自己对应的服务器api接口

7、上传错误情况

如果出现上传错误的提示，那么有可能是存在如下问题

因此把pre标签去掉即可

r = r.replace(/<pre.*?>/ig, "")
.replace("</pre>", "")
.replace(/<audio.*?>/ig, "")
.replace("</audio>", "");

8、上传图片成功的效果

备注：如果是用到asp.net mvc来引用，那么使用提供的类下HttpContent类的使用 System.Web.HttpContext.Current 》upFile(HttpContext cxt