【小5聊】前端之百度在线文本编辑器UmEditor的简单配置使用

1、编辑器的使用场景

1）论坛发帖

2）站内图文信息发布

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

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

2、首先，就是下载好相关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

 

【-----欢迎咨询，答疑解惑，相互学习，共同进步-----】