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,函数来把经过转义的数据转回来.然后再输出到模板,然后就可以看到编辑的效果出现在面前了

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

html4.0编辑器,KindEditor HTML(在线编辑器)
KindEditor是在国内比较受欢迎的HTML在线编辑器,本次更新新增单元格编辑功能,各种按钮(确定.取消.上传等按钮)在不同浏览器上保持相同外观. KindEditor v4.0.4 更新日志: ...
linux服务器做页面,linux服务器搭建在线预览环境
linux版本 Centos.x86_64 需要下载的工具包 openoffice 选择 Linux x86_64 rpm chinese简体中文包解压并安装安装openoffice tar zx ...
关于百度编辑器UEditor在asp.net中的使用方法！
为了完成自己想要的功能效果,在项目中使用到了百度编辑器,为了搞明白,苦心学习查资料搞了整整一天,总结一下. 在asp.net 的项目中目前我觉得有两种情况,一种是没有使用模板页的,一种是使用了模板页的 ...
ThinkPHP框架中使用富文本编辑器后如何输出
htmlspecialchars_decode()用这个能解析里面的符号我们在利用ThinkPHP提交数据的时候,数据库里的数据是含各种html标签的,那么在输出时就可以直接输出嘛.但是,也许你的老 ...
前端代码在线编辑器：codepen、codesandbox
文章目录单文件在线编辑器项目级在线编辑器推荐两个前端代码在线编辑器单文件在线编辑器:https://codepen.io/pen/ 项目级在线编辑器:https://codesandbox.i ...
05传智_jbpm与OA项目_部门模块中增加部门的jsp页面增加一个在线编辑器功能
这篇文章讲的是在线编辑器功能,之前的部门模块中,增加部门的功能jsp页面起先是这么做的. 加入在线编辑器之后要达到的效果是: 采用一个插件,名为FCKeditor-v2.6.3.要理解一个插件,要先从 ...
Google推出了牛逼的Python在线编辑器，以后协同项目代码就省心了
Google推出了牛逼的Python在线编辑器,以后协同项目代码就省心了,环境配置对于大多数人来说都是拦路虎,我们小白往往不知道: 怎么正确的安装不知道选择什么怎么安装常用的第三方库 ... Go ...
如何让html页面可以在线编辑,自己打造HTML在线编辑器的实现难点分析
HTML在线编辑器实际上是什么其实有好几种实现方式,目前用得最多.兼容性最好的还是iframe方式. 只有这个空iframe是不行的,还要用Javascript把它设成可编辑:iframe.cont ...
做一个“多人在线编辑器”，你会怎么开始
看似只是一个简单的问题,但是其中却隐含了非常多的知识,对于"多人在线编辑器"这么一个产品来说,如果让你来负责设计并开发,你会怎么去开始一步步展开工作,其中主要考察的并不是让你迅速的 ...
Editor.md开源在线编辑器（页面插件集成—markdown）
页面插件集成-markdown 我想或许是个人博客主的福音了,通过引入markdown到博客内容管理区,非常有效且快速. 为了便以理解,这边利用个人html文件进行描述,如有不懂得地方,请提出获取编 ...

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

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

最新文章

热门文章