开发博客类型的网站,一个不可缺少的点就是需要在页面中集成富文本编辑器
下面篇文章就介绍集成umeditor编辑器的步骤
还有一个就是集成时候的注意事项(是自己亲身体验的,花了很长时间才找到问题所在)
<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 id="editor" style="width:900px;height:400px;"></div>
<script></script>
里面初始化富文本编辑器var ue = UE.getEditor("editor");
最后就成功了
注意事项(如果按上面的步骤成功之后,就不用看下面的了!!!)
想说的注意事项是:
通常都是将富文本编辑器放在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>