内容提要：百度UEditor是所见即所得网页编辑器,允许自由使用和修改代码,本文给大家分享php开发中如何集成百度Ueditor编辑器？
开发项目必不可少用到在线网页编辑器，常用的网页编辑器有：
eWebEditor 网页编辑器、Fckeditor 网页编辑器、KindEditor HTML在线编辑器、百度Ueditor编辑器……
百度UEditor是所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。
今天中国网页设计给大家分享php开发中如何集成百度Ueditor编辑器。
1.到官网下载百度UEditor
下载后解压文件到你的项目中。
2.部署百度Ueditor网页编辑器
在Html页面引入所需的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网页编辑器了吧？是不是很简单。
3、配置Ueditor
UEditor 的配置项分为两类：前端配置项 和 后端配置项。
前后端的配置统一写在后端(PHP版本的config在php/config.json)，编辑器实例化时，异步读取后端配置信息，覆盖到前端的配置里。
前端配置项：官方提供了两种配置方法，静态配置、动态配置。
静态配置：
即配置ueditor 目录下的 ueditor.config.js& 具体配置项就参考&
动态配置：
即在实例化UE的时候，通过动态传入配置参数。
var ue = UE.getEditor('container', {&&& //这里写你的自定义配置项&&& toolbars: [&&&&&&& ['fullscreen', 'source', 'undo', 'redo', 'bold']&&& ],&&& autoHeightEnabled: true,&&& autoFloatEnabled: true});
后端配置项：
百度Ueditor网页编辑器所有的操作都是通过get方式请求serverUrl传递action变量的值来进行下一步操作。
百度Ueditor默认是通过读取目录下的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"]&&& "其他配置项...": "其他配置值..."}
[381][3142][176][179][160]
共有0人对本文发表评论
（网友评论仅供表达个人看法，并不表明本站同意其观点或证实其描述）汇聚2000万达人的兴趣社区下载即送20张免费照片冲印
扫码下载App
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
在这里是面向程序员的高品质IT技术学习社区,是程序员学习成长的地方。让我们更好地用技术改变世界。请关注新浪微博号： IT国子监（/itguozijian）
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
对于作网站的朋友来说编辑器是必需的，本人也用了几个编辑器，比如：ewebeditor,fck,xheditor等，ewebeditor最大的缺点就是兼容性了，当然如果你出钱买的话就另当别论啦，fck是国外的对于国人来说不是很方便，xheditor编辑还是比较简单的功能不是很强。今天给大分享一下百度推出的编辑器ueditor，开源免费、比较安全、功能比较强大比较适合中国人使用。& &UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器，具有轻量、可定制、用户体验优秀等特点。开源基于BSD协议，所有源代码在协议允许范围内可自由修改和使用。最近在开发程序的时候需要集成一个富文本编辑器，UEditor的UI及UE比CKEditor、KindEditor要好出不少。所以简单地对UEditor研究了一下，记录于此。百度编辑器UEditor 下载：&& & & & & & & & &完整版的部署与体验：解压后的源码目录结构如下所示：_examples：编辑器完整版的示例页面_demos：编辑器的各种使用案例dialogs：弹出对话框对应的资源和js文件&themes：样式图片和样式文件server：涉及到服务器端操作的php、jsp等文件third-party：第三方插件editor_all.js：_src目录下所有文件的打包文件editor_all_min.js：editor_all.js文件的压缩版，建议在正式部署时才采用editor_config.js：编辑器的配置文件，建议和编辑器实例化页面置于同一目录将包下载下来放在web包下，我的是这个：&&&在jsp页面按正确路径引入&在&head&&/head&中代码Java代码&&script&type="text/javascript"&charset="utf-8"&src="&c:url&value='/js/ueditor/editor_config.js'/&"&&/script&&&&script&type="text/javascript"&charset="utf-8"&src="&c:url&value='/js/ueditor/editor_all_min.js'/&"&&/script&&&&link&rel="stylesheet"&href="&c:url&value='/js/ueditor/themes/default/ueditor.css'/&"&/&&&&&&script&src="&c:url&value="/js/jquery/jquery-1.4.2.min.js"/&"&&/script&&&&&&&&&&&script&language="javascript"&&&&&&&&&&&&&$(document).ready(function()&{&&&&&&&&&&&&&&var&editor&=&new&baidu.editor.ui.Editor({&&&&&&&&&&&&&&&&&&textarea&:&'description'&//&&textarea&的名称，后台就是接这个变量。&&&&&&&&&&&&&&});&&&&&&&&&&&&&&//var&URL="../js/ueditor/";&&&&&&&&&&&&&&editor.render("myEditor");&&&&&&&&&&&&&&$('#submitLink').removeAttr("href")&&&&&&&&&&&&&&&&&&&&&&.click(function()&{&&&&&&&&&&&&&&&&&&if(editor.hasContents()){&&//提交条件满足时提交内容&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&editor.sync();&&&&&&&&&&&//此处的editor是页面实例化出来的编辑器对象&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&$('#caseForm').submit();&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&}else{&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&alert("案例描述&不能为空！！&");&&&&&&&&&&&&&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&}).css({&&&&&&&&&&&&&&&&&&&&&&&&&&'cursor'&:&'pointer'&&&&&&&&&&&&&&&&&&&&&&});&&&&&&&&&&&&&&$('#cancelLink').removeAttr("href")&&&&&&&&&&&&&&&&&&&&&&.click(function()&{&&&&&&&&&&&&&&&&&&&&&&&&&&//$('#caseForm').submit();&&&&&&&&&&&&&&&&&&&&&&}).css({&&&&&&&&&&&&&&&&&&&&&&&&&&'cursor'&:&'pointer'&&&&&&&&&&&&&&&&&&&&&&});&&&&&&&&&&&&&&});&&&&&&&&&/script&&&Java代码&&form&id="caseForm"&name="caseForm"&action="uploadCase.do"&method="post"&enctype="multipart/form-data"&&&&&t;tr&&&&&&&&&&&&&&&&&&&&&&td&valign="top"&描述&/td&&&&&&&&&&&&&&&&&&&&&&td&colspan="2"&&&&&&&&&&&&&&&&&&&&&&script&type="text/plain"&id="myEditor"&${description}&/script&&&&&&&&&&&&&&&&&&&&&&/td&&&&&&&&&&&&&&&&&&/tr&&&&&&a&id="submitLink"&&确定&/tt&&/a&&&&&a&id="cancelLink"&&&&&/tt&&/a&&&注意：&提交的地方 一定要使用它提供的这个方法，因为这里有赋值.&要使得上传图片和附件等功能页面出来，就要调试editor_config.js。Java代码&//dialog内容的路径&～会被替换成URL&&&&&&&&&iframeUrlMap:{&&&&&&&&&&&&&'anchor':rootPath+'/js/ueditor/dialogs/anchor/anchor.html',&&&&&&&&&&&&&'insertimage':rootPath+'/js/ueditor/dialogs/image/image.html',&&&&&&&&&&&&&'inserttable':rootPath+'/js/ueditor/dialogs/table/table.html',&&&&&&&&&&&&&'link':rootPath+'/js/ueditor/dialogs/link/link.html',&&&&&&&&&&&&&'spechars':rootPath+'/js/ueditor/dialogs/spechars/spechars.html',&&&&&&&&&&&&&'searchreplace':rootPath+'/js/ueditor/dialogs/searchreplace/searchreplace.html',&&&&&&&&&&&&&'map':rootPath+'/js/ueditor/dialogs/map/map.html',&&&&&&&&&&&&&'gmap':rootPath+'/js/ueditor/dialogs/gmap/gmap.html',&&&&&&&&&&&&&'insertvideo':rootPath+'/js/ueditor/dialogs/video/video.html',&&&&&&&&&&&&&'help':rootPath+'/js/ueditor/dialogs/help/help.html',&&&&&&&&&&&&&'highlightcode':rootPath+'/js/ueditor/dialogs/code/code.html',&&&&&&&&&&&&&'emotion':rootPath+'/js/ueditor/dialogs/emotion/emotion.html',&&&&&&&&&&&&&'wordimage':rootPath+'/js/ueditor/dialogs/wordimage/wordimage.html',&&&&&&&&&&&&&'attachment':rootPath+'/js/ueditor/dialogs/attachment/attachment.html',&&&&&&&&&&&&&'insertframe':rootPath+'/js/ueditor/dialogs/insertframe/insertframe.html',&&&&&&&&&&&&&'edittd':rootPath+'/js/ueditor/dialogs/table/edittd.html',&&&&&&&&&&&&&'snapscreen':&rootPath+'/js/ueditor/dialogs/snapscreen/snapscreen.html'&&&&&&&&&},&&其中的rootpath：Java代码&&var&curWwwPath=window.document.location.&&&&//获取主机地址之后的目录，如：&uimcardprj/share/meun.jsp&&&var&pathName=window.document.location.&&&var&pos=curWwwPath.indexOf(pathName);&//获取主机地址，如：&http://localhost:8083&&&var&localhostPaht=curWwwPath.substring(0,pos);&//获取带"/"的项目名，如：/uimcardprj&&var&projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);&&&var&rootPath&=&localhostPaht+projectN&&这是我项目所需的路径，依照自己的项目找到正确的插件地址就可以。&上传图片的页面在ueditor\dialogs\image\image.html&修改它的上传处理操作路径：&Java代码&url:rootPath+'/upload/uploadImage.jsp',&&/rootPath同上，后面为处理功能的jsp页面。&&&&&上传附件的页面在ueditor\dialogs\attachment\attachment.html&修改它的上传处理操作路径：&Java代码&&&&upload_url:rootPath+'/upload/uploadFile.jsp',&&&&&/rootPath同上，后面为处理功能的jsp页面。&&&&&上传图片和附件功能实现代码放在ueditor\server\upload下，有各4种语言的上传例子，参照修改使用，以上的两个jsp（'/upload/uploadImage.jsp'和 '/upload/uploadFile.jsp',&&）就是参照里面的up.jsp做的，基本上不需要有大的改动，主要是把存储路径和访问路径调对，就行。&editor_config.js中的代码&Java代码&UEDITOR_CONFIG&=&{&&&&&&&&imagePath:rootPath&,&//图片文件夹所在的路径，用于显示时修正后台返回的图片url！具体图片保存路径需要在后台设置。！important&&&&&&&&compressSide:0,&&&&&&&&&&&&&&&&&&&//等比压缩的基准，确定maxImageSideLength参数的参照对象。0为按照最长边，1为按照宽度，2为按照高度&&&&&&&&maxImageSideLength:900,&&&&&&&&&&//上传图片最大允许的边长，超过会自动等比缩放,不缩放就设置一个比较大的值&&&&&&&&relativePath:true,&&&&&&&&&&&&&&&&//是否开启相对路径。开启状态下所有本地图片的路径都将以相对路径形式进行保存.强烈建议开启！&&&&&&&&&&filePath:rootPath,&&//附件文件夹保存路径&&&&&catchRemoteImageEnable:true,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&//是否开启远程图片抓取&&&&&&&&catcherUrl:rootPath&+"server/submit/php/getRemoteImage.php",&&&&&&&&&&&&&//处理远程图片抓取的地址&&&&&&&&localDomain:"",&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&//本地顶级域名，当开启远程图片抓取时，除此之外的所有其它域名下的图片都将被抓取到本地&&&&&imageManagerPath:rootPath+&"server/submit/php/imageManager.php",&&&&&&&//图片在线浏览的处理地址&&&&&&&&UEDITOR_HOME_URL:&rootPath,&&&&up.jsp中的代码&Java代码&response.getWriter().print(&&&&&&&&&&&&&&&&&&"{'url':'"+&realPath&+&"/"&+&picTo&+&"','title':'"&&&&&&&&&&&&&&&&&&&&&&&&&&+&title&+&"','state':'"&+&state&+&"'}");&&editor_config.js中的代码中的 rootPath 和 up.jsp中的代码中的url就是图片的地址，访问的地址，就是把rootPath 转化为域名，这个自己好好调试一下就出来了，附件也和上传图片基本一样。重点还是自己弄清楚自己的路径怎么设置的，才能正确访问到。&(记得关注噢)&
阅读(3857)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'百度开源富文本编辑器UEditor使用详细说明（总结）',
blogAbstract:'　'
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}当前访客身份：游客 [
当前位置：
KindEditor 和百度的 ueditor哪个更好些呢？嘿嘿
共有12个答案
<span class="a_vote_num" id="a_vote_num_
ueditor需要加载百度开发的js框架。
<span class="a_vote_num" id="a_vote_num_
从文件大小上我会选择KindEditor，百度的ueditor比kindEditor大10倍。
功能上我会选择，百度的ueditor就是基于这个开发的。
<span class="a_vote_num" id="a_vote_num_
用過kindeditor，喜歡它的小巧
<span class="a_vote_num" id="a_vote_num_
偶喜欢CKEditor哈，怎么偶看到CK就先想到CK小内裤昵，嘿～嘿～～
<span class="a_vote_num" id="a_vote_num_
引用来自“路西菲尔”的答案偶喜欢CKEditor哈，怎么偶看到CK就先想到CK小内裤昵，嘿～嘿～～
CK这东西很差的。
CK抽检不合格。
<span class="a_vote_num" id="a_vote_num_
引用来自“fff80”的答案引用来自“路西菲尔”的答案偶喜欢CKEditor哈，怎么偶看到CK就先想到CK小内裤昵，嘿～嘿～～
CK这东西很差的。
CK抽检不合格。其实吧，如果真要100%的达标的话，基本上很少的，不是成本过高就是啥啥偷工减料，这事太正常了，什么行业都一样。只不过大家都睁只眼闭只眼罢了，HOHO～～
--- 共有 3 条评论 ---
: 不能这么想的，你看那些经常抽检合格的品牌就是不错的。你看taobangbang.org/hao/
(4年前)&nbsp&
: 这样的公司多的是，要多少有多少。
(4年前)&nbsp&
那样的公司就赶走。
(4年前)&nbsp&
<span class="a_vote_num" id="a_vote_num_
KindEditor 3.5.5 ()
Copyright &
All rights reserved.
<span class="a_vote_num" id="a_vote_num_
都不行，不稳定，官方教程不行，百度的教程甚至有误导作用
<span class="a_vote_num" id="a_vote_num_
引用来自“白起”的答案都不行，不稳定，官方教程不行，百度的教程甚至有误导作用那你是用的什么编辑器呢？
--- 共有 1 条评论 ---
(3年前)&nbsp&
<span class="a_vote_num" id="a_vote_num_
ueditor还好，功能多，bug少
有什么技术问题吗？
xzg的其他问题
类似的话题