总结(四)—集成富文本编辑器Umeditor

开发博客类型的网站，一个不可缺少的点就是需要在页面中集成富文本编辑器
下面篇文章就介绍集成umeditor编辑器的步骤
还有一个就是集成时候的注意事项(是自己亲身体验的，花了很长时间才找到问题所在)

进入官网下载官网下载
将下载之后解压的所有文件全部添加到工程的web里面（目录自己选）
在需要集成的页面引入相关js文件(三个文件，注意自己放的位置)

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

设置富文本编辑器存放的位置（将下面的div放在想放的位置）

<div id="editor" style="width:900px;height:400px;"></div>

最后一步，在<script></script>里面初始化富文本编辑器

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

最后就成功了
总结(四)—集成富文本编辑器Umeditor

注意事项（如果按上面的步骤成功之后，就不用看下面的了！！！）
想说的注意事项是：
通常都是将富文本编辑器放在form表单里面，然后通过提交form表单将数据发给后端服务器。但是通常如果form表单里面还有其他的div，而且还设置了其他div的属性，那这个时候就极有可能富文本编辑器界面无法正常显示。
我遇到这个问题，想了很长时间不知道为啥错误，基本把前面都检查了好几篇，结果还是一样，富文本编辑器那块区域一片空白。
后来想到的解决办法是：在form表单里面划分两个区域，一个用于存放除富文本编辑器的其他组件，另一个存放富文本编辑器的div。就是利用两个大的div将他们分离开，最后就ok了！！！！（难过啊…）

<div class="umedit_wf">
     <div id="editor" name="artical_context" style="width:900px;height:400px;"></div>
</div>

秒客网

总结(四)—集成富文本编辑器Umeditor

相关文章