php做页面编辑器,最牛在线编辑器ueditor在thinkphp框架中的使用方法

1.先来介绍一下这个ueditor编辑器:UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器，具有轻量、可定制、用户体验优秀等特点。开源基于BSD协议，所有源代码在协议允许范围内可自由修改和使用。最近在开发程序的时候需要集成一个富文本编辑器，UEditor的UI及UE比CKEditor、KindEditor要好出不少。所以简单地对UEditor研究了一下，记录于此。

2.初步了解之后当然是到官网下载一个完整版的ueditor

http://ueditor.baidu.com/website/download.html

这里吐槽一下,mini版为毛给完整版还要大啊,功能还没有完整版多~~~~

3.将UEditor部署到thinkphp框架里

3.1把解压缩后的所有东西都放到一个自己创建的ueditor文件夹里面,然后把文件夹放到你的扩展插件目录,例如放到扩展目录Admin/Public/的下面,并且在入口文件index.php中把ueditor所在的路径设置为常量.

3.2 在需要引用ueditor编辑器的模板页面引入以下的文件:

(不会用js的朋友,把所有下面彩色的部分直接复制到head标签里面即可)

//这个是ueditor的配置文件,应该第一个引入

//这个是ueditor的主体文件

//这个是ueditor的中文语言包

//这个是ueditor的css样式

3.2 然后需要把ueditor载入到当前的页面

(不会用js的朋友,把所有下面彩色的部分直接复制到head标签里面即可)

window.UEDITOR_HOME_URL = '<{$smarty.const.A_UE_URL}>';

//2载入编辑器

window.onload = function () {

//2.1配置编辑器(这里的所有配置项都需要自己在ueditor.config.js中复制过来,复制以后记得把冒号改成等号.)

window.UEDITOR_CONFIG.initialFrameWidth = 700;//编辑器宽度

window.UEDITOR_CONFIG.initialFrameHeight = 500;//编辑器高度

window.UEDITOR_CONFIG.autoClearinitialContent = true;//自动清除编辑器初始内容

//2.2实例化编辑器到id为myEditor的文本框

UE.getEditor('myEditor');

}

3.3 最后当然是把载入并且实例化的myEditor找个容器装起来,容器可以是script,div和textarea,官方推荐使用script容器,但是我比较喜欢用最原始的textarea容器.

(不会用js的朋友,把所有下面彩色的部分直接复制到body标签里面即可)

请编辑新闻内容

然后就可以把ueditor输出到模板中了.

4.你以为这么快就完了吗?下一步才是重点好不好!!!

(除非你不考虑安全问题,不经过create直接就用add输入到数据库,要不然下一步是必看的)

出于对安全的考虑,thinkphp框架里面的create函数会把输入的html代码用htmlspecialchars函数转义了,所有你在在线编辑器里面的编辑内容都会经过转义在存储到数据库中,如果你从数据库里直接拿到数据以后不作任何的处理就直接分配给模板,你会看到以下的现象

所以,在数据库里取出结果之后,还需要对经过编辑的文本使用htmlspecialchars_decode,函数来把经过转义的数据转回来.然后再输出到模板,然后就可以看到编辑的效果出现在面前了