百度UEditor编辑器!合入PHP网站!

免费开源百度编辑器（UEditor）使⽤⽅法UEditor效果图UEditor是⼀个开源免费的编辑器，由百度web前端研发部开发所见即所得富⽂本web编辑器，具有轻量，可定制，注重⽤户体验等特点，开源基于BSD协议，允许⾃由使⽤和修改代码。

官⽹上下载完整源码包，解压到任意⽬录，解压后的源码⽬录结构如下所⽰：_examples：编辑器完整版的⽰例页⾯dialogs：弹出对话框对应的资源和JS⽂件themes：样式图⽚和样式⽂件php/jsp/.net：涉及到服务器端操作的后台⽂件，根据你选择的不同后台版本，这⾥也会不同，这⾥应该是jsp,php,.netthird-party：第三⽅插件(包括代码⾼亮，源码编辑等组件）editor_all.js：_src⽬录下所有⽂件的打包⽂件editor_all_min.js：editor_all.js⽂件的压缩版，建议在正式部署时才采⽤editor_config.js：编辑器的配置⽂件，建议和编辑器实例化页⾯置于同⼀⽬录或者⽹上搜索别⼈配置好的实例，这样⾃⼰就不⽤折腾了。

我⾃⼰弄的，结果折腾了好久，差点想放弃了！我下载的是开发版 [1.2.5.1 .Net 版本] 2013年4⽉27⽇，最新版本。

代码结构图第⼀步：在项⽬的任⼀⽂件夹中建⽴⼀个⽤于存放UEditor相关资源和⽂件的⽬录，此处在项⽬根⽬录下建⽴，起名为ueditor（⾃⼰喜欢）。

第⼆步：拷贝源码包中的dialogs、themes、third-party、editor_all.js和editor_config.js到ueditor⽂夹中。

其中，除了ueditor⽬录之外的其余⽂件均为具体项⽬⽂件，此处所列仅供⽰例。

第三步：为简单起见，此处将以根⽬录下的index.php页⾯作为编辑器的实例化页⾯，⽤来展⽰UEditor的完整版效果。

在index.php⽂件中，⾸先导⼊编辑器需要的三个⼊⼝⽂件，⽰例代码如下：复制代码代码如下:<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>编辑器完整版实例</title><script type="text/javascript" src="ueditor/editor_config.js"></script><script type="text/javascript" src="ueditor/editor_all.js"></script>复制代码代码如下:<textarea name="后台取值的key" id="myEditor">这⾥写你的初始化内容</textarea><script type="text/javascript">var editor = new UE.ui.Editor();editor.render("myEditor");//1.2.4以后可以使⽤⼀下代码实例化编辑器//UE.getEditor('myEditor')</script>最后⼀步：在/UETest/ueditor/ editor_config.js中查找URL变量配置编辑器在你项⽬中的路复制代码代码如下://强烈推荐以这种⽅式进⾏绝对路径配置（注意：下⾯的UETest是虚拟⽬录名称）URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";1.在引⽤editor_config.js时，最好先于editor_all.js加载，否则特定情况下可能会出现报错。

百度编辑器UEditor的插件开发1.概述UEditor是由百度web前端研发部开发的所见即所得富文本web编辑器，具有轻量、可定制、注重用户体验等特点，开源基于BSD协议，允许自由使用和修改代码。

2.下载UEditor截至2013.11.27，最新版本为1.3.5，下面是具体的相关文档的下载地址：百度官网下载地址：/download.html#ueditor；官方文档资料地址:/document.html；官方API地址：/。

3.源码包文件说明从官网上下载完整源码包，解压到任意目录，解压后的源码目录结构如下所示：•_examples：编辑器的示例页面•dialogs：弹出对话框对应的资源和JS文件•themes：样式图片和样式文件•editor.config.js：编辑器的配置文件•editor.api.js：开发版的所有js文件导入•editor.all.js：使用版的所有js文件•lang：语言文件•jsp、net、php：涉及到服务器端操作的文件•third-party：第三方插件4.部署和使用UEditor可供普通用户使用，同时UEditor的插件机制也为二次开发者提供了自定义插件的开发。

1）在项目的任一文件夹中建立一个用于存放UEditor相关资源和文件的目录。

2）创建简单的编辑器实例，首先在html页面中准备一个dom容器，容器可以是<textareaid="editor"></textarea>或<divid="editor"></div>，也可以是<scripttype="text/plain"id="editor"></script>标签。

3）引入相关文件1 2 3 4 5 <scripttype="text/javascript"src="editor.config.js"></script><!--使用版--><!--<scripttype="text/javascript"src="ueditor.all.js"></script>--> <!--开发版--><scripttype="text/javascript"src="editor.api.js"></script>4）创建编辑器1 <scripttype="text/javascript"charset="utf-8">2 3 4 5 6 7 8 9101112131415161718 //通过new操作符实例化编辑器对象varmyEditor=newbaidu.editor.ui.Editor(); myEditor.render('editor');//渲染dom容器//使用UE.getEditor(）实例化编辑器对象varmyEditor=UE.getEditor('myEditor');//通过new操作符实例化编辑器对象并自定义配置项varmyEditor=newbaidu.editor.ui.Editor({ toolbars:[//自定义工具栏['FullScreen','Source','Undo','Redo']],wordCount:false,//关闭字数统计elementPathEnabled:false,//关闭elementPath initialFrameHeight:300//默认的编辑区域高度});myEditor.render('editor');1920212223242526272829 //通过UE.getEditor(）实例化编辑器对象并自定义配置项UE.getEditor('myEditor',{toolbars:[//自定义工具栏['FullScreen','Source','Undo','Redo']],wordCount:false,//关闭字数统计elementPathEnabled:false,//关闭elementPath initialFrameHeight:300//默认的编辑区域高度})</script>说明：使用<textarea>和<scripttype="text/plain">标签做渲染容器，可以在容器中设置编辑器初始化的内容，如：<textareaid="editor">编辑器初始化的内容</textarea>；<scripttype="text/plain"id="myEditor">编辑器初始化的内容</script>；但是如果使用div作为渲染容器，就不可以在标签里设置初始值，但可通过在创建编辑器的时候配置initialContent参数来设置初始值。

ueditor百度编辑器的赋值⽅法⽰例： /website/onlinedemo.html引⽤代码： window.UMEDITOR_HOME_URL = $CONFIG['domain'] + "/res/local/js/ueditor/"; //注意就是这⾥！window.UEDITOR_CONFIG.imageUrl = $CONFIG['domain'] + '/goodspic?type=2';window.UEDITOR_CONFIG.savePath= ['upload'];window.UEDITOR_CONFIG.imagePath = $CONFIG['domain'] + '/res/local/uploads/';UE.getEditor('addArea')UE.getEditor('areaBottom')⽰例代码var domUtils = UE.dom.domUtils;var ServerUrl = '/server/ueditor/';var options = {//图⽚上传配置区serverUrl:ServerUrl+"controller.php",imageUrl:ServerUrl+"imageUp.php" //图⽚上传提交地址,imagePath:ServerUrl //图⽚修正地址，引⽤了fixedImagePath,如有特殊需求，可⾃⾏配置//涂鸦图⽚配置区,scrawlUrl:ServerUrl+"scrawlUp.php" //涂鸦上传地址,scrawlPath:ServerUrl+"" //图⽚修正地址，同imagePath//附件上传配置区,fileUrl:ServerUrl+"fileUp.php" //附件上传提交地址,filePath:ServerUrl //附件修正地址，同imagePath,catchRemoteImageEnable: false// ,catcherUrl:ServerUrl +"getRemoteImage.php" //处理远程图⽚抓取的地址// ,catcherPath:ServerUrl //图⽚修正地址，同imagePath,imageManagerUrl:ServerUrl + "imageManager.php" //图⽚在线管理的处理地址,imageManagerPath:ServerUrl //图⽚修正地址，同imagePath,snapscreenHost: location.hostname //屏幕截图的server端⽂件所在的⽹站地址或者ip，请不要加http://,snapscreenServerUrl: ServerUrl +"imageUp.php" //屏幕截图的server端保存程序，UEditor的范例代码为“ServerUrl +"server/upload/snapImgUp.php"” ,snapscreenPath: ServerUrl,snapscreenServerPort: location.port //屏幕截图的server端端⼝,wordImageUrl:ServerUrl + "imageUp.php" //word转存提交地址,wordImagePath:ServerUrl //,getMovieUrl:ServerUrl+"getMovie.php" //视频数据获取地址,videoUrl:ServerUrl+"fileUp.php" //附件上传提交地址,videoPath:ServerUrl, //附件修正地址，同imagePathlang:/^zh/.test(nguage || navigator.browserLanguage || erLanguage) ? 'zh-cn' : 'en',langPath:UEDITOR_HOME_URL + "lang/",disabledTableInTable: false,webAppKey:"9HrmGf2ul4mlyK8ktO2Ziayd",initialFrameWidth:860,initialFrameHeight:400,focus:true,shortcutMenu:["fontfamily", "fontsize", "bold", "italic", "underline", "forecolor", "backcolor", "insertorderedlist", "insertunorderedlist"]};function setLanguage(obj) {var value = obj.value,opt = {lang:value};UE.utils.extend(opt, options, true);UE.delEditor("editor");//清空语⾔if (!UE._bak_I18N) {UE._bak_I18N = UE.I18N;}UE.I18N = {};UE.I18N[ng] = UE._bak_I18N[ ng ];UE.getEditor('editor', opt);}function isFocus(e){alert(UE.getEditor('editor').isFocus());UE.dom.domUtils.preventDefault(e)}function setblur(e){UE.getEditor('editor').blur();UE.dom.domUtils.preventDefault(e)}function insertHtml() {var value = prompt('插⼊html代码', '');UE.getEditor('editor').execCommand('insertHtml', value)}function createEditor() {enableBtn();UE.getEditor('editor', {initialFrameWidth:"100%"})}function getAllHtml() {alert(UE.getEditor('editor').getAllHtml())}function getContent() {var arr = [];arr.push("使⽤editor.getContent()⽅法可以获得编辑器的内容");arr.push("内容为：");arr.push(UE.getEditor('editor').getContent());alert(arr.join("\n"));}function getPlainTxt() {var arr = [];arr.push("使⽤editor.getPlainTxt()⽅法可以获得编辑器的带格式的纯⽂本内容");arr.push("内容为：");arr.push(UE.getEditor('editor').getPlainTxt());alert(arr.join('\n'))}function setContent(isAppendTo) {var arr = [];arr.push("使⽤editor.setContent('欢迎使⽤ueditor')⽅法可以设置编辑器的内容");UE.getEditor('editor').setContent('欢迎使⽤ueditor', isAppendTo);alert(arr.join("\n"));}function setDisabled() {UE.getEditor('editor').setDisabled('fullscreen');disableBtn("enable");}function setEnabled() {UE.getEditor('editor').setEnabled();enableBtn();}function getText() {//当你点击按钮时编辑区域已经失去了焦点，如果直接⽤getText将不会得到内容，所以要在选回来，然后取得内容 var range = UE.getEditor('editor').selection.getRange();range.select();var txt = UE.getEditor('editor').selection.getText();alert(txt)}function getContentTxt() {var arr = [];arr.push("使⽤editor.getContentTxt()⽅法可以获得编辑器的纯⽂本内容");arr.push("编辑器的纯⽂本内容为：");arr.push(UE.getEditor('editor').getContentTxt());alert(arr.join("\n"));}function hasContent() {var arr = [];arr.push("使⽤editor.hasContents()⽅法判断编辑器⾥是否有内容");arr.push("判断结果为：");arr.push(UE.getEditor('editor').hasContents());alert(arr.join("\n"));}function setFocus() {UE.getEditor('editor').focus();}function deleteEditor() {disableBtn();UE.getEditor('editor').destroy();}function disableBtn(str) {var div = document.getElementById('btns');var btns = domUtils.getElementsByTagName(div, "button");for (var i = 0, btn; btn = btns[i++];) {if (btn.id == str) {domUtils.removeAttributes(btn, ["disabled"]);} else {btn.setAttribute("disabled", "true");}}}function enableBtn() {var div = document.getElementById('btns');var btns = domUtils.getElementsByTagName(div, "button"); for (var i = 0, btn; btn = btns[i++];) {domUtils.removeAttributes(btn, ["disabled"]);}}function getLocalData () {alert(UE.getEditor('editor').execCommand( "getlocaldata" )); }function clearLocalData () {UE.getEditor('editor').execCommand( "clearlocaldata" );alert("已清空草稿箱")}window.onkeydown = function (e){if (!ue.isFocus()) {var keyCode = e.keyCode || e.which;if (keyCode == 8) {e.preventDefault();}}};。

百度富⽂本编辑器使⽤（PHP） // ========================================================================2-2，PHP 具体使⽤<script>//-- 百度富⽂本编辑器 new UE -------------------var ueditor = null;$config = { // 配置serverUrl: '/editor/report.php',// ⼯具栏，⾃⼰选择增删toolbars: [['fullscreen', 'fontsize', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'forecolor', 'link',]],autoHeightEnabled: false,};//--------------------------------------------// 2-1-1, 获取vue上的数据放到编辑中 ===========================//-- 百度富⽂本【新增】 -----------------ueditor = UE.getEditor('txtDesc', $config);//-----------------------------------------// 2-1-2, 将编辑器中数据ueditor.getContent()重新赋值到vue中 ========//-- 百度编辑器获取⽂本框输⼊的值 --------this.childReport.sDesc = ueditor.getContent();//----------------------------------------</script>// php 提供 action=config的接⼝$action = $_aRequest['action'] ? trim($_aRequest['action']) : '';if ($action == 'config') {exit('{/* 上传图⽚配置项 */"imageActionName": "uploadimage", /* 执⾏上传图⽚的action名称 */"imageFieldName": "upfile", /* 提交的图⽚表单名称 */"imageMaxSize": 5242880, /* 上传⼤⼩限制，单位B */"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图⽚格式显⽰ */"imageCompressEnable": true, /* 是否压缩图⽚,默认是true */"imageCompressBorder":1600,"imageInsertAlign":"none","imageUrlPrefix":"", /* 图⽚访问路径前缀 *//* 上传视频配置 */"videoActionName": "uploadvideo", /* 执⾏上传视频的action名称 */"videoFieldName": "upfile", /* 提交的视频表单名称 */"videoUrlPrefix": "", /* 视频访问路径前缀 */"videoMaxSize": 102400000, /* 上传⼤⼩限制，单位B，默认100MB *//* 上传视频格式显⽰ */"videoAllowFiles": [".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"],}');}。

UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器，具有轻量、可定制、用户体验优秀等特点。

开源基于BSD协议，所有源代码在协议允许范围内可自由修改和使用。

最近在开发程序的时候需要集成一个富文本编辑器，UEditor的UI及UE比CKEditor、KindEditor要好出不少。

所以简单地对UEditor研究了一下，记录于此。

一、下载UEditor编辑器UEditor官方网站：/在下载频道可以下载到最新版本的UEditorUEditor的下载方式分为两种，完整下载与定制下载，完整下载提供UTF-8与GBK两种编码的版本，定制下载目前只有UTF-8编码，推荐使用定制下载，按需求定制，如果程序不是UTF-8编码，可以使用EditPlus等工具将压缩包里所有的HTML及JS文件转码，记得同时修改HTML文件中的charset=utf-8。

二、精简UEditor编辑器完整版的相关文档与示例页面较多，可以自行研究一下，下面为定制版中可以精简的文件。

index.html是所定制的UEditor编辑器的示例文件，删除之。

editor.js与editor.min.js内容相同，editor.min.js是editor.js的压缩版，使用时加载editor.min.js 即可，所以editor.js也可以删除。

三、将UEditor部署到PHP程序上1.将UEditor的所有文件放在PHP程序的目录中，这里我把文件放在/ueditor目录下。

2.在网页中引入UEditor文件<script type="text/javascript" src="ueditor/editor_config.js"></script><script type="text/javascript" src="ueditor/editor.min.js"></script>3.在textarea标签下初始化UEditor<script type="text/javascript">var editor = new UE.ui.Editor();textarea:'name'; //与textarea的name值保持一致editor.render('name');</script>四、配置UEditor编辑器editor_config.js是UEditor的配置文件，首先对路径进行配置。

1.1跟我学百度UEditor在线文本编辑器及应用实例——在J2EE Web应用系统中如何配置UEditor在线文本编辑器1.1.1UEditor在线文本编辑器的浏览器前端配置相关的属性选项1、修改UEditor在线文本编辑器配置的两种方式（1）第一种方法是通过重新定义ueditor.config.js配置文件中的如下的属性选项window.UEDITOR_HOME_URL的值在引用editor_config.js文件之前，在JavaScript程序代码中需要重新设置ueditor.config.js 配置文件中的window.UEDITOR_HOME_URL变量的值为“编辑器资源文件根路径”，如下为代码示例：<script type="text/javascript">window.UEDITOR_HOME_URL = "./baiduUEditor/";</script>一般都采用网站根目录的相对路径，也就是以斜杠开头的形如"/myProject/ueditor/"这样的路径。

（2）第二种方法是在对UEditor在线文本编辑器进行对象实例化的时传入相关的属性选项的配置参数，如下为代码示例：var ue = UE.getEditor('ueditorTextAreaID', {toolbars: [['fullscreen', 'source', 'undo', 'redo', 'bold']],autoHeightEnabled: true,autoFloatEnabled: true});2、在引用UEditor在线文本编辑器的页面中重新定义window.UEDITOR_HOME_URL （1）采用相对目录路径的示例<script type="text/javascript">window.UEDITOR_HOME_URL = "./baiduUEditor/";</script><script type="text/javascript" src="./baiduUEditor/ueditor.config.js"></script><script type="text/javascript" src="./baiduUEditor/ueditor.all.min.js"></script><script type="text/javascript" charset="utf-8"src="./baiduUEditor/lang/zh-cn/zh-cn.js"></script> 注意UEDITOR_HOME_URL、config、all这三个顺序不能改变。

/***********************************************/引入百度编辑器ueditor：使用方法如下：下载ueditor编辑器文件后,将其放在自己的引入路径（include）文件夹中，ueditor编辑器文件（使用版）包括editor_all.js,editor_configs.js等文件。

1. php中引入文件及文本域：<link rel="stylesheet" type="text/css" href="ueditor/themes/default/css/ueditor. css"/><script type="text/javascript" src="ueditor/editor_all.js"></script><script type="text/javascript" src="ueditor/editor_config.js"></script><form name="form" action="test.php" method="post"><!--一下页面的三个编辑器如下--><div><script type="text/plain" id="learnTarget" name="learnTarget"></script> </div><div><script type="text/plain" id="learnTarget" name="learnImportant"></scrip t></div><div><script type="text/plain" id="learnTarget" name="learnWay"></script></div></form>*注意引入文件的路径根据实际情况而定2.在php文档包含的js文件中:a.初始化文本编辑器<script>editor1 = new baidu.editor.ui.Editor({ initialContent:'<内容>',initialFrameWidt h:500,initialFrameHeight:300});//定义一个编辑器对象？editor1.render('learnTarget');//实例化编辑器对象，其中learnTarget是编辑器的ideditor2 = new baidu.editor.ui.Editor({ initialContent:'<内容>',initialFrameWidt h:500,initialFrameHeight:300});editor2.render('learnImportant');editor3 = new baidu.editor.ui.Editor({ initialContent:'<内容>',initialFrameWidt h:500,initialFrameHeight:300});editor3.render('learnWay');</script>1)initialContent:表示文本域所给的默认值；1)initialFrameWidth:表示给编辑器设计的宽度；3)initialFrameHeight:表示给编辑器设计的高度；b.用js获取及设置文本域的内容：<script>//获取文本域内容var learnTarget = myTrim(editor1.getContent());var learnImportant = myTrim(editor2.getContent());var learnWay = myTrim(editor3.getContent());//更新文本域内容editor1.setContent('新内容');editor2.setContent('新内容');editor3.setContent('新内容');</script>c.用js提交文本域内容<script>returnEditor = UE.getEditor('learnTarget');//获取编辑器returnEditor.sync();//使编辑器与文本域中的文本保持同步returnEditor = UE.getEditor('learnImportant');returnEditor.sync();returnEditor = UE.getEditor('learnWay');returnEditor.sync();document.form.submit();</script>/***********************************************/。

这篇文章主要为大家介绍了将百度编辑器(Ueditor)整合到dedecms中的方法,通过对应配置文件的修改实现采用百度编辑器替换dedecms原有编辑器的方法,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了将百度编辑器(Ueditor)整合到dedecms中的方法，分享给大家供大家参考。

具体分析如下：现在百度编辑器感觉比dedecms自带的编辑器要强多了,这里就来给大家介绍替换dedecms自带编辑器的方法.Ueditor整合dedecms步骤1. ueditor的下载安装到ueditor官网下载最新版的编辑器源码,到dedecms的include目录新建文件夹ueditor,该文件夹就是ueditor路径,下面修改编辑器配置文件时需要该路径.2. 修改dedecms编辑器配置文件修改网站根目录下的include/inc/inc_fun_funAdmin.php文件,找到如下代码:代码如下:if($GLOBALS['cfg_html_editor']=='fck')替换为代码如下:代码如下:if($GLOBALS['cfg_html_editor']=='ueditor')&nbsp;{&nbsp;$fvalue = $fvalue=='' ? '&lt;p&gt;&lt;/p&gt;' : $fvalue;&nbsp;$code = '&lt;script type="text/javascript" charset="utf-8" src="'.$GLOBALS['cfg_cmspath'].'/include/ueditor/editor_config.js"&gt;&lt;/script&gt;&nbsp;&lt;script type="text/javascript" charset="utf-8" src="'.$GLOBALS['cfg_cmspath'].'/include/ueditor/editor_all.js"&gt;&lt;/script&gt;&nbsp;&lt;link rel="stylesheet" type="text/css" href="'.$GLOBALS['cfg_cmspath'].'/include/ueditor/themes/default/css/ueditor.css"/&gt;&nbsp;&lt;textarea name="'.$fname.'" id="'.$fname.'" style="width:100%;"&gt;'.$fvalue.'&lt;/textarea&gt;&nbsp;&lt;script type="text/javascript"&gt;var ue = new baidu.editor.ui.Editor();ue.render("'.$fname.'");&lt;/script&gt;';&nbsp;if($gtype=="print")&nbsp;{&nbsp;echo $code;&nbsp;}&nbsp;else&nbsp;{&nbsp;return $code;&nbsp;}&nbsp;}else if($GLOBALS['cfg_html_editor']=='fck')补充:1、我使用的是dedecms 5.7; &nbsp; &nbsp; &nbsp; &nbsp;2、我这里引入的是editor_all.js而不是editor_all_min.js，min是压缩过后的js文件不方便修改。

PHP如何搭建百度Ueditor富⽂本编辑器本⽂为⼤家分享了PHP搭建百度Ueditor富⽂本编辑器的⽅法，供⼤家参考，具体内容如下下载UEditor官⽹：将下载好的⽂件解压到thinkphp项⽬中，本⽂是解压到PUBLIC⽬录下并改⽂件夹名称为ueditor第⼀步引⼊javascript在html中如⼊下⾯的js语句引⼊相关⽂件<script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.all.js"></script>第⼆步添加textare⽂本域并设置id值<textarea type="text" name="content" id="EditorId" placeholder="请输⼊内容"></textarea>第三步初始化UEditor编辑器在html代码中添加下⾯的代码初始化UEditor编译器<script type="text/javascript" charset="utf-8">//初始化编辑器window.UEDITOR_HOME_URL = "__PUBLIC__/ueditor/";//配置路径设定为UEditor所放的位置window.onload=function(){window.UEDITOR_CONFIG.initialFrameHeight=600;//编辑器的⾼度window.UEDITOR_CONFIG.initialFrameWidth=1200;//编辑器的宽度var editor = new UE.ui.Editor({imageUrl : '',fileUrl : '',imagePath : '',filePath : '',imageManagerUrl:'', //图⽚在线管理的处理地址imageManagerPath:'__ROOT__/'});editor.render("EditorId");//此处的EditorId与<textarea name="content" id="EditorId">的id值对应 </textarea>}</script>第四步设置图⽚上传路径UEditor编辑器的默认图⽚上传路径是根⽬录下/ueditor/php/upload/image/⽬录，没有这个⽬录会⾃动创建，如果要⾃定义图⽚上传路径，可以在ueditor/php/config.json⽂件中12⾏处修改。

DedeCMS安装百度ueditor编辑器的方法
DedeCMS安装百度ueditor编辑器的方法
发布时间：2015-12-01编辑：余斗阅读：(292)字号：大中小Dede自带的ckeditor编辑器是一款年代久远的编辑器，只能实现一些基本的文字编辑功能，现在看来十分落后。

而百度旗下的Ueditor编辑器是目前功能最齐全的一款编辑器，利用它能实现很多功能，那么如何在DedeCMS中安装百度Ueditor编辑器呢?
一、先Ueditor编辑器文件
首先百度“百度ueditor编辑器”，点击官网;
进入下载页面，找到自己需要的版本，点击下载;
把解压后的文件提取出来命名为“ueditor”;
最后，将ueditor文件夹上传到网站根目录的include文件夹下。

二、修改inc_func_funcAdmin.php文件
找到include/inc/inc_func_funcAdmin.php文件，先备份好，再修改，将以下代码加入到第184行：
如图：
三、修改后台配置
依次进入[后台]-[系统]-[系统基本参数]-[核心设置]”Html编辑器(ckeditor,需要fck的用户可以去官网下载)：“这一选项修改为：ueditor;
四、在Dede后台发布文章或者修改文章，我们会发现编辑器已经成功替换，是不是很方便呢?快去试试吧!
如果，要修改附件(图片或文件)的上传目录，请猛戳：《百度ueditor编辑器图片及文件上传配置修改》。

ECSHOP安装百度编辑UEditor教程先看效果图：教程开始：打开这两个文件，一个是商品编辑，一个是文章编辑/admin/templates/goods_info.htm/admin/templates/article_info.htm查找：1 {$FCKeditor}修改成：<script type="text/javascript" charset="utf-8" src="../includes/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="../includes/ueditor/ueditor.all.min.js"> </script> <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败--><!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文--><script type="text/javascript" charset="utf-8" src="../includes/ueditor/lang/zh-cn/zh-cn.js"></script> <style type="text/css">.clear {clear: both;}</style><textareaid="goods_desc" name="goods_desc" style="width:100%;heigh t:500px;"> {$goods.goods_desc}</textarea><script type="text/javascript">delete(Object.prototype.toJSONString);UE.getEditor('goods_desc')</script>两个文件都这样修改。

ueditorPHP版本使⽤⽅法1.ueditor是百度很好⽤的⼀款⽂本编辑器，第⼀次使⽤，在此记录使⽤⽅法。

3.解压：说明dialogs：存放的是弹出对话框对应的资源，还有js⽂件和js⽂件资源lang：语⾔⽂件⽬录php：php⽬录：php⽂件->config.json：配置⽂件themes：主题⽬录third-party：第三⽅插件index.html：demoueditor.all.js：ueditor源码⽂件ueditor.all.min.js：ueditor源码⽂件压缩版ueditor.config.js：配置⽂件（可以创建多个不同版本，在多个地⽅使⽤）ueditor.parse.js：第三⽅插件ueditor.parse.min.js：第三⽅插件压缩版4.在⽂件中建⽴index.html⽂件，引⼊ueditor，两者放在平级⽬录中：如下：5.在index.html中引⼊ueditor，index.html编辑如下：<html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title>editor测试</title><script src="/ueditor/ueditor.config.js">/*引⼊配置⽂件*/</script><script src="/ueditor/ueditor.all.js">/*引⼊源码⽂件*/</script></head><body><textarea id="content" rows="10" cols="70" style="border:1px solid #E5E5E5;">55222</textarea><script type="text/javascript">UE.getEditor("content");//实例化编辑器传参,id为将要被替换的容器。

1.1跟我学百度UEditor在线文本编辑器及应用实例——UEditor在线文本编辑器功能特性及官方技术文档1.1.1UEditor在线文本编辑器功能特性及官方技术文档1、UEditor在线文本编辑器功能特性UEditor是一个开源免费的Web方式下的富文本编辑器（Rich Text Editor，简称RTE），而Web方式下的富文本编辑器其实也就是一种可内嵌于浏览器页面，并且实现所见即所得编辑功能的文本编辑器。

UEditor是由百度Web前端研发部开发并发布的一款所见即所得的富文本Web编辑器。

具有轻量、可定制和注重用户体验等技术特点，而且开源基于BSD协议，允许自由使用和修改代码。

UEditor在线文本编辑器官方网站上介绍的相关功能特性如下：如下示例图为应用UEditor在线文本编辑器所编辑的一篇新闻稿件的局部截图：2、官方网站/website/（1）官方网站地址读者可以在UEditor在线文本编辑器官方网站上（/website/）下载与UEditor相关的系统库文件。

（2）系统库下载页面的网址/website/download.html在UEditor在线文本编辑器官方网站上为开发人员提供了中文“UTF-8”和“GBK”两种不同的中文编码版本的下载链接，而且分为完整版和Mini定制版。

由于目前的Web应用系统开发平台有多种不同的语言形式，因此也为开发人员提供了PHP、ASP、和JSP等不同平台的版本。

开发人员然后根据自己的Web应用系统的开发平台选择不同版本的下载包。

本文下载JSP版本。

另外，还提供其它的资源文件，读者可以根据应用的需要选择性地下载。

3、UEditor在线文本编辑器在线Demo示例4、UMeditor（满足论坛系统的发帖框或回复框的应用需求在线文本编辑器）在线Demo示例5、UEditor在线文本编辑器提供在线入门帮助参考文档Ueditor提供了功能说明文档和使用说明文档。

UEditor编辑器的使用教程
咱们在开发的时候经常会用到一些所见即所得的编辑器，今天给大家介绍一款由百度开发的UEditor，这个编辑器效果不错，用得起来也很方便简单，大家在开发的时候可以用到这款编辑器。

首先，咱们需要在网上下载这款编辑器：
/build/build_down.php?n=ueditor&v=1_4_3_3-utf8-jsp
我这里下载的是支持jsp的最新版本，它还有支持php,.net的其它版本。

一、完成基本配置：
1.将下载的文件解压到咱们的JavaWeb项目中(如下图)：
2.把相应的jar包导入到项目中(如下)
这几个jar包可以在/ueditor/jsp/lib中找到
最后展示的效果如下：
大家可以看到，这里可以完成各种设置(包含字体，表格，表情，图片等东西)，整体看来，效果还是非常不错的。

二、参数配置效果
完成基本的配置之，咱们又要学习一下，看怎么来进行一些常用参数的配置。

三、上传图片功能
接下来咱们简单说一下插件的上传图片功能，上传功能是自带的，如果你是jsp+servlet 非常简单，直接使用就可以了，但是我们可以去设计上传的路径与名称。

大家可以在
文件的位置：文件中修改的位置(设置到自己需要的位置)
下面是上传了图片后的效果：
四、Struts2的上传功能
下面做一个扩展，如果咱们的项目是使用的Struts2，那么Struts2的核心过滤器会导致咱们的上传失效。

最近项目中使用到了富文本编辑器，选择的是百度的UEditor。

所以对其进行了研究，发现最近发布了新版本，与以往的用法有的改变。

一下对UEditotr 的是用做一下详细的介绍。

首先是UEditotr的下载，下载地址：/website/download.html在这个页面有很多下载选项，为了简单起见，可以更具开发的环境进行下载。

我用的是JSP，所以下载的是以下的使用说明也都是以JSP的作为介绍，其他的大同小异。

下载完成之后解压出来。

下边开始介绍使用方法：一.导入：将解压好的文件导入工程，我用的是MyEclipse，直接粘贴到工程中的WebRoot下如图：工程中的js文件报错是由于开发工具的问题，不用处理。

二.包的导入：在导入的文件中的jsp->lib下有需要导入的包将这些包拷贝到WEB-INF的lib下导入后有的包不能自动添加，需要手动添加一下。

三.简单例子：在jsp的head中添加：<script type="text/javascript"charset="utf-8"src="ueditor1_4_2-utf8-jsp/ueditor.config.js"></script> <script type="text/javascript"charset="utf-8" src="ueditor1_4_2-utf8-jsp/ueditor.all.js"></script>body中添加：<script id="editor" name="editor" type="text/plain"style="width:1024px;height:500px;"></script><script type="text/javascript">//实例化编辑器//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例 var ue = UE.getEditor('editor');</script>注意在head中的引用是否正确，一切完成后启动程序，就能看到效果。

百度文本编辑器提供了.net(C#)，php，asp，jsp多个版本的开源开发版本下载。

但完整的开发版本的配置稍显麻烦，尤其是v 1.3.5要想比较快速和正确的使用该版本的编辑器，必须手动调整一些配置。

1、将ueditor文件夹加到你的项目解决方案下。

2、找到net文件夹，右键点击“Uploader.cs”确定属性值的设置和下图一致。

3、接下来看Config.cs 。

我是直接去掉了对这跟文件的使用。

觉得这个配置对于项目可能没有必要。

然后看ashx，这里最常用的ashx可能就是ImageUp.ashx和GetRemoteImage.ashx。

前者是在编辑器中上传本地图片时用来调用上传文件的处理程序，后者是用来显示远程图片或者直接搜索图片时，拉取远程图片下载到本地的处理程序。

4、编辑器加载后，上传图片时，一直想显示正在获取文件保存目录，无法点击上传图片的解决办法：打开ueditor.config.js，找到注释掉的SavePath，放开之后就可以显示他注释写法里的两个选项，可以根据实际情况修改。

这个设置是为了让用户手动修改保存的文件夹，我直接设置了一个选项，并且不作为程序保存图片的路径。

我在ImageUp和GetRemoteImage里的路径做了自己的配置，没有使用他的Config.cs 截图如下：如图4-1 ImageSavePath可以做调整或干脆不用，后面的方法是我自己写的，用来配置图片的保存路径的根目录图4-1 Config文件的调整以下代码摘自ImageUp。

<%@WebHandler Language="C#"Class="imageUp" %>using System;using System.Web;using System.IO;using System.Collections;using System.Linq;using COMM;public class imageUp : IHttpHandler{public void ProcessRequest(HttpContext context){if (!String.IsNullOrEmpty(context.Request.QueryString["fetch"])){context.Response.AddHeader("Content-Type","text/javascript;charset=utf-8");context.Response.Write(String.Format("updateSavePath([{0}]);", String.Join(", ", Config.ImageSavePath.Select(x => "\""+ x + "\"").ToArray())));return;}context.Response.ContentType = "text/plain";//上传配置int size = 2; //文件大小限制,单位MB //文件大小限制，单位MBstring[] filetype = { ".gif", ".png", ".jpg", ".jpeg", ".bmp"}; //文件允许格式//上传图片Hashtable info = new Hashtable();Uploader up = new Uploader();//此处修改为使用固定路径string path =Config. GetDefaultPath("Upload");// /UEFiles//if (String.IsNullOrEmpty(path))//{// path = Config.ImageSavePath[0];//}//else if (Config.ImageSavePath.Count(x => x == path) == 0)//{// context.Response.Write("{ 'state' : '非法上传目录' }");// return;//}info = up.upFile(context, path + '/', filetype, size); //获取上传状态string title = up.getOtherInfo(context, "pictitle"); //获取图片描述string oriName = up.getOtherInfo(context, "fileName"); //获取原始文件名HttpContext.Current.Response.Write("{'url':'" + info["url"] +"','title':'"+ title + "','original':'"+ oriName + "','state':'"+ info["state"] + "'}"); //向浏览器返回数据json数据}public bool IsReusable{get{return false;}}}经过上述的设置，我发现图片上传本地的时候可以成功，但是却无法正常显示到编辑器，后来我跟断点发现，js文件里的配置还需要改动一下。

UEditor富文本编辑器整合经验分享UEditor富文本编辑器整合经验分享 (1)第 1 章引言 (1)第 2 章官方DEMO (3)第 3 章动手整合UEditor (5)第 1 章引言前段时间开发邮件模块需要使用到一款富文本编辑器，综合考察之后选择了UEditor——百度的富文本编辑器。

在整合到项目的过程中，遇到了不少问题，困扰了不少时间，在整合过程中也参考了不少前辈们的文章收获良多，本文主要是谈谈自己在整合过程中遇到各种问题（或者网上甚少提到的）及UEditor自己的一些内部瑕疵，做为经验分享给大家，希望大家在以后的整合过程中避免可能会重复陷入的坑提供一些帮助和提醒。

UEditor工具条UEditor功能展示UEditor是一款功能相对比较强大的前端富文本编辑器，支持四种后台语言环境，比如php，asp，，jsp。

UEditor是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。

百度官方UEditor文档及下载地址为百度UEditor官网上，可以查看并下载UEditor源码，初始了解UEditor功能及体验。

由于ueditor开发组是一个前端团队，而对后端实力较欠缺(官方原话)，笔者在整合过程中发现其对后台的处理还有些瑕疵（比如图片上传及回显处理或文件上传及下载处理），特别是没有具体前后台交互的实际案例（能让开发者在本地实际运行的DEMO）开发者实际调试成功，便能快速地掌握前后台交互的机制。

下图为百度FEX团队的对后端部署的说明第 2 章官方DEMO官方下载地址/website/download.html本文以JSP版本为例下载UTF-8版本并解压用浏览器打开index.html看到demo界面，兴奋了一阵子，然而涉及到后台交互的功能(如图片文件上传)，暂时是不能用的，按F12查看浏览器控制台发现有错误由于官方demo没有后台代码的实际支撑，所以实际整合过程中会遇到各种问题，或许一时没有头绪，如果有一个实际能运行的案例就好了。