Thinkphp下嵌套UEditor富文本WEB编辑器

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码...

本文实际操作于ThinkPHP框架下，现分享与大家参考，整体流程详解如下：

第一步：

下载UEditor编译器，请到官网进行下载：http://ueditor.baidu.com/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编译器的标签中，设置id属值为：id="EditorId",如下：</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">textarea </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="text"</span><span style="color:#ff0000;"> name</span><span style="color:#0000ff;">="content"</span><span style="color:#ff0000;"> id</span><span style="color:#0000ff;">="EditorId"</span><span style="color:#ff0000;"> placeholder</span><span style="color:#0000ff;">="请输入内容"</span><span style="color:#0000ff;">></span><span style="color:#0000ff;"></</span><span style="color:#800000;">textarea</span><span style="color:#0000ff;">></span></pre> </div> <p>第三步;</p> <p>对UEditor编译器进行初始化，如下（以下代码放于<span style="color:#ff6600;">第二步</span>的两个JS文件下面）：</p> <div class="cnblogs_code"> <div class="cnblogs_code_toolbar"> <span class="cnblogs_code_copy"><img src="http://img.e-com-net.com/image/info8/bd54bc823ad4473c8df81da2dd0e2402.gif" alt="复制代码" width="0" height="0"></span> </div> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">script </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="text/javascript"</span><span style="color:#ff0000;"> charset</span><span style="color:#0000ff;">="utf-8"</span><span style="color:#0000ff;">></span><span style="color:#000000;"> window.UEDITOR_HOME_URL </span><span style="color:#000000;">=</span> <span style="color:#000000;">"</span><span style="color:#000000;">__PUBLIC__/admin/ueditor/</span><span style="color:#000000;">"</span><span style="color:#000000;">;</span><span style="color:#008000;">//</span><span style="color:#008000;">配置路径设定为UEditor所放的位置</span> <span style="color:#000000;"> window.onload</span><span style="color:#000000;">=</span><span style="color:#0000ff;">function</span><span style="color:#000000;">(){ window.UEDITOR_CONFIG.initialFrameHeight</span><span style="color:#000000;">=</span><span style="color:#000000;">300</span><span style="color:#000000;">;</span><span style="color:#008000;">//</span><span style="color:#008000;">编辑器的高度</span> <span style="color:#000000;"> window.UEDITOR_CONFIG.initialFrameWidth</span><span style="color:#000000;">=</span><span style="color:#000000;">800</span><span style="color:#000000;">;</span><span style="color:#008000;">//</span><span style="color:#008000;">编辑器的宽度</span> <span style="color:#0000ff;">var</span><span style="color:#000000;"> editor </span><span style="color:#000000;">=</span> <span style="color:#0000ff;">new</span><span style="color:#000000;"> UE.ui.Editor({ imageUrl : </span><span style="color:#000000;">'</span><span style="color:#000000;">__APP__/Editor/uploadImage</span><span style="color:#000000;">'</span><span style="color:#000000;">, fileUrl : </span><span style="color:#000000;">'</span><span style="color:#000000;">__APP__/Editor/uploadFile</span><span style="color:#000000;">'</span><span style="color:#000000;">, imagePath : </span><span style="color:#000000;">''</span><span style="color:#000000;">, filePath : </span><span style="color:#000000;">''</span><span style="color:#000000;">, imageManagerUrl:</span><span style="color:#000000;">'</span><span style="color:#000000;">__APP__/Editor/imageManage</span><span style="color:#000000;">'</span><span style="color:#000000;">, </span><span style="color:#008000;">//</span><span style="color:#008000;">图片在线管理的处理地址</span> <span style="color:#000000;"> imageManagerPath:</span><span style="color:#000000;">'</span><span style="color:#000000;">__ROOT__/</span><span style="color:#000000;">'</span><span style="color:#000000;"> }); editor.render(</span><span style="color:#000000;">"</span><span style="color:#000000;">EditorId</span><span style="color:#000000;">"</span><span style="color:#000000;">);</span><span style="color:#008000;">//</span><span style="color:#008000;">此处的EditorId与<textarea name="content" id="EditorId">的id值对应 } 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        

效果如下：

以上详细步骤，如有错误点，还请指正修改~

 

本文为作者原创，转载请注明出处：http://www.cnblogs.com/wenzheshen/