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实现首页链接查询 友情链接检查的代码
Jan 05 PHP
PHP 时间日期操作实战
Aug 26 PHP
基于php实现长连接的方法与注意事项的问题
May 10 PHP
PHP实现Javascript中的escape及unescape函数代码分享
Feb 10 PHP
WordPress中Gravatar头像缓存到本地及相关优化的技巧
Dec 19 PHP
thinkPHP下ueditor的使用方法详解
Dec 26 PHP
Ajax和PHP正则表达式验证表单及验证码
Sep 24 PHP
基于PHP制作验证码
Oct 12 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
Jul 03 PHP
PHP实现的mysql主从数据库状态检测功能示例
Jul 20 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
May 12 PHP
laravel-admin 实现在指定的相册下添加照片
Oct 21 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实现的九九乘法口诀表简洁版
2014/07/28 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
php常用的工具开发整理
2019/09/26 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
Python 正则表达式(转义问题)
2014/12/15 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
中学实习教师自我鉴定
2013/12/12 职场文书
法警的竞聘演讲稿
2014/01/02 职场文书
村官工作鉴定评语
2014/01/27 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
《荷花》教学反思
2014/04/16 职场文书
销售队伍口号
2014/06/11 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
学习党代会心得体会
2014/09/05 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python