作者：小5聊基础
简介：一只喜欢全栈方向的程序员，欢迎咨询，尽绵薄之力答疑解惑
编程原则：Write Less Do More
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
