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

超、凢脫俗 2023-10-17 15:01 82阅读 0赞

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

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

第一步：

下载UEditor编译器，请到官网进行下载：http://ueditor.baidu.com/website/download.html

注：本例中所用UEditor编译器版本为：【1.4.3.2 [ PHP][PHP]版本】

ThinkPHP框架版本为：【ThinkPHP3.2.3完整版】

第二步：

首先在后台的项目中引入UEditor编译器的[js][]文件，如下：

然后在需要使用UEditor编译器的<textarea>标签中，设置id属值为：id="EditorId",如下：

第三步;

对UEditor编译器进行初始化，如下（以下代码放于第二步的两个JS文件下面）：

![复制代码][copycode.gif]

![复制代码][copycode.gif]

UEditor编译器显示效果如下：

![52554992][]

至此UEditor编译器的初始化配置已经完成。

另：对内容进行编辑提交后显示效果如下：

![52554992][]

第四部：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

效果如下：

![52554992][]

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

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

[PHP]: http://lib.csdn.net/base/php
[js]: http://lib.csdn.net/base/javascript
[copycode.gif]: http://common.cnblogs.com/images/copycode.gif
[52554992]: http://blog.csdn.net/lshake/article/details/52554992
[VR]: http://lib.csdn.net/base/vr