PHP集成百度Ueditor 1.4.3


Posted in PHP onNovember 23, 2014

最近很多群友都来问我怎么集成百度UE(ueditor 1.4.3),实在回答不过来,所以在这写一下集成百度UE的思路,本文内使用的最新版的UE1.4.3。

下载安装

1.首先到官网下载最新版的UE1.4.3
UE官方下载地址:http://ueditor.baidu.com/website/download.html#ueditor

这里我下载的是1.4.3PHP版本。下载你所使用的版本就行。

解压文件到你的项目

PHP集成百度Ueditor 1.4.3

2.部署.在前端Html页面引入UE  所需的JS文件,然后使用getEditor 实例化

<body>

    <!-- 加载编辑器的容器 -->

    <script id="container" name="content" type="text/plain">

        这里写你的初始化内容

    </script>

    <!-- 配置文件 -->

    <script type="text/javascript" src="ueditor.config.js"></script>

    <!-- 编辑器源码文件 -->

    <script type="text/javascript" src="ueditor.all.js"></script>

    <!-- 实例化编辑器 -->

    <script type="text/javascript">

        var ue = UE.getEditor('container');

    </script>

</body>

 
浏览你的页面,即可见Ueditor 。是不是很简单的说。

配置Ueditor

UEditor 的配置项分为两类:前端配置项 和 后端配置项。
前后端的配置统一写在后端(PHP版本的config在php/config.json),编辑器实例化时,异步读取后端配置信息,覆盖到前端的配置里。

后端获取的配置项 > 实例化传入的配置项 > ueditor.config.js文件的配置项

前端配置项:官方提供了两种配置方法,静态配置、动态配置。

静态配置:即配置ueditor 目录下的 ueditor.config.js  具体配置项就参考  http://fex-team.github.io/ueditor/#start-config

动态配置:即在实例化UE的时候,通过动态传入配置参数。

var ue = UE.getEditor('container', {

    //这里写你的自定义配置项

    toolbars: [

        ['fullscreen', 'source', 'undo', 'redo', 'bold']

    ],

    autoHeightEnabled: true,

    autoFloatEnabled: true

});

后端配置项:
在这里先说一下UE的请求:UE所有的操作都是通过get方式请求serverUrl传递action变量的值来进行下一步操作。获取配置、上传图片、获取图片等等其它的操作。

UE默认是通过读取目录下的ueditor.config.js 中的serverUrl 参数然后通过get方法传递action=config来获取后端的配置项的。默认请求是:serverUrl?action=config 来获取配置项的。serverUrl 可以在前端页面动态配置和ueditor.config.js静态配置都是可以的。

你可以测试你的网站下的路径 ueditor/php/controller.php?action=config 是否正常返回了json格式(其它格式也可以,具体请看官方文档)的后端配置内容,格式大致如下。如果这个请求出错,出现400、500等错误,编辑器上传相关的功能将不能正常使用。

{

    "imageUrl": "http://localhost/ueditor/php/controller.php?action=uploadimage",

    "imagePath": "/ueditor/php/",

    "imageFieldName": "upfile",

    "imageMaxSize": 2048,

    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"]

    "其他配置项...": "其他配置值..."

}
 

集成

前面已经说过了UE所有的操作都是通过get方式请求serverUrl传递action变量的值来进行下一步操作。获取配置、上传图片、获取图片等等其它的操作。了解了这一点,对于集成PHP。或者其它的语言都很简单了。具体代码可以参考官方提供的Demo。

好了,小伙伴们已经明白了如何集成百度Ueditor了吧,本文是自己的一些经验,希望能帮到大家

PHP 相关文章推荐
很好用的PHP数据库类
May 27 PHP
让PHP COOKIE立即生效,不用刷新就可以使用
Mar 09 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
Aug 28 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
Aug 11 PHP
yii2中LinkPager增加总页数和总记录数的实例
Aug 28 PHP
PHP whois查询类定义与用法示例
Apr 03 PHP
PHP INT类型在内存中占字节详解
Jul 20 PHP
Thinkphp自定义生成缩略图尺寸的方法
Aug 05 PHP
Laravel 解决composer相关操作提示php相关异常的问题
Oct 23 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
May 02 PHP
THINKPHP5.1 Config的配置与获取详解
Jun 08 PHP
PHP+Mysql分布式事务与解决方案深入理解
Feb 27 PHP
php jsonp单引号转义
Nov 23 #PHP
php常用文件操作函数汇总
Nov 22 #PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
Nov 22 #PHP
ThinkPHP中I(),U(),$this-&gt;post()等函数用法
Nov 22 #PHP
ThinkPHP中处理表单中的注意事项
Nov 22 #PHP
php中convert_uuencode()与convert_uuencode函数用法实例
Nov 22 #PHP
php常用hash加密函数
Nov 22 #PHP
You might like
隐性调用php程序的方法
2015/06/13 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
DOM精简教程
2006/10/03 Javascript
js右键菜单效果代码
2007/07/21 Javascript
JavaScript 学习技巧
2010/02/17 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
echarts学习笔记之箱线图的分析与绘制详解
2017/11/22 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
Python中变量交换的例子
2014/08/25 Python
Python 文件管理实例详解
2015/11/10 Python
Python对象转JSON字符串的方法
2016/04/27 Python
Python自定义主从分布式架构实例分析
2016/09/19 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
捐款倡议书怎么写
2014/05/13 职场文书
工程材料采购方案
2014/05/18 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
英语教师求职信范文
2015/03/20 职场文书
春风化雨观后感
2015/06/11 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
原生JS实现分页
2022/04/19 Javascript
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS