UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码...
本文实际操作于ThinkPHP框架下，现分享与大家参考，整体流程详解如下：
第一步：
下载UEditor编译器，请到官网进行下载：/website/download.html
注：本例中所用UEditor编译器版本为：【1.4.3.2 PHP版本】
ThinkPHP框架版本为：【ThinkPHP3.2.3完整版】
第二步：
首先在后台的项目中引入UEditor编译器的js文件，如下：
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/ueditor/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/ueditor/ueditor.all.js"></script>
然后在需要使用UEditor编译器的<textarea>标签中，设置id属值为：id="EditorId",如下：
<textarea type="text" name="content" id="EditorId" placeholder="请输入内容"></textarea>
第三步;
对UEditor编译器进行初始化，如下（以下代码放于第二步的两个JS文件下面）：
<script type="text/javascript" charset="utf-8">window.UEDITOR_HOME_URL = "__PUBLIC__/admin/ueditor/";//配置路径设定为UEditor所放的位置window.onload=function(){window.UEDITOR_CONFIG.initialFrameHeight=300;//编辑器的高度 window.UEDITOR_CONFIG.initialFrameWidth=800;//编辑器的宽度var editor = new UE.ui.Editor({imageUrl : '__APP__/Editor/uploadImage',fileUrl : '__APP__/Editor/uploadFile',imagePath : '',filePath : '',imageManagerUrl:'__APP__/Editor/imageManage', //图片在线管理的处理地址 imageManagerPath:'__ROOT__/'});editor.render("EditorId");//此处的EditorId与<textarea name="content" id="EditorId">的id值对应 </textarea> }</script>
UEditor编译器显示效果如下：
至此UEditor编译器的初始化配置已经完成。
另：对内容进行编辑提交后显示效果如下：
第四部：UEditor富文本WEB编辑器的前后台页面数据的显示
方法如下：
|htmlspecialchars_decode|stripslashes（前后台页面显示数据时不仅要反转义还要去掉html实体化）
如：{$VR.content|htmlspecialchars_decode|stripslashes}这样就能正常显示了,后台显示也是如此。
至此整个UEditor编辑器插件的安装配置已ok。
优化点：
在使用UEditor编辑器编写内容时你会发现，当输入的内容较多时，编辑框的边框高度也会自动增加，若希望输入内容较多时以拉框滚动的效果。
方法：找到Ueditor文件根目录下的ueditor.config.js，用编译器打开，看到282~286行代码如下：
//scaleEnabled//是否可以拉伸长高,默认true(当开启时，自动长高失效)//,scaleEnabled:false//,minFrameWidth:800 //编辑器拖动时最小宽度,默认800//,minFrameHeight:220 //编辑器拖动时最小高度,默认220
现修改成如下：（编译器拖动的最小高度可自行设置）
//scaleEnabled//是否可以拉伸长高,默认true(当开启时，自动长高失效),scaleEnabled:true//,minFrameWidth:800 //编辑器拖动时最小宽度,默认800,minFrameHeight:300 //编辑器拖动时最小高度,默认220
效果如下：
以上详细步骤，如有错误点，还请指正修改~
本文为作者原创，转载请注明出处：/wenzheshen/
