先上图:
织梦整合Ueditor的主要步骤
- 下载最新版的Ueditor 1.4.3(根据你的织梦编码选择下载utf-8还是gbk的)
- 把Ueditor解压,放到织梦目录中
- 修改织梦文件,以便织梦后台能正常加载Ueditor编辑器
- 配置Ueditor
- 解决Ueditor图片上传及管理等路径错误
初识Ueditor
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,也常称为“百度编辑器”。与其它编辑器相比,Ueditor包含了其功能,并在此基础上整合了百度自已的产品(如:轻松插入百度地图,涂鸦,图片在线管理等)。点击进入Ueditor官方网站。
下面简单说一下Ueditor相关文件的作用:
ueditor.all.js
:编辑器初始化及相关功能的JavaScript代码。其压缩版为ueditor.all.min.js,一般在应用中调用此文件。ueditor.config.js
:编辑器的配置文件,如:图片上传路径,附件上传。ueditor.parse.js
:编辑的内容显示页面引用,会自动加载表格、列表、代码高亮等样式,其对应的压缩片为ueditor.parse.min.js。
关于Ueditor更加详细的应用及部署,请参见官方文档:UEditor文档。
前期部署
点击上面Ueditor官方网站链接,下载Ueditor,本文以Ueditor 1.4.3 和 dede 5.7sp1(安装在网站根目录) 为例。如果你不想去做一些烦人的配置工作,你可以直接下跳,下载我更改后的文件直接覆盖,并到后台设置HTML编辑器为:ueditor。
在织梦根目录下的include目录中创建一个名为ueditor
的目录,将文件解压,把Ueditor的所有文件直接复制到此目录。
更改include/inc/inc_fun_funAdmin.php文件以调用Ueditor
打开织梦目录下include/inc/inc_fun_funAdmin.php
文件。找到SpGetEditor
函数(ctrl+f就ok),这个函数是根据后台配置来自动调用对应编辑器的,我们正要修改此文件。在大概227行(在该函数的最后)的位置,即else if($GLOBALS['cfg_html_editor']=='ckeditor')
这个语句的结尾,直接插入以下代码:
- //开始百度编辑器
- elseif($GLOBALS['cfg_html_editor']=='ueditor'){
- $fvalue = $fvalue==''?'<p></p>': $fvalue;
- $code ='<script type="text/javascript" charset="utf-8" src="'.$GLOBALS['cfg_cmspath'].'/include/ueditor/ueditor.config.js"></script>
- <script type="text/javascript" charset="utf-8" src="'.$GLOBALS['cfg_cmspath'].'/include/ueditor/ueditor.all.min.js"></script>
- <link rel="stylesheet" type="text/css" href="'.$GLOBALS['cfg_cmspath'].'/include/ueditor/themes/default/css/ueditor.min.css"/>
- <textarea name="'.$fname.'" id="'.$fname.'">'.$fvalue.'</textarea>
- <script type="text/javascript">var ue = new baidu.editor.ui.Editor({initialFrameHeight:400});ue.render("'.$fname.'");</script>';
- if($gtype=="print")
- {
- echo $code;
- }
- else
- {
- return $code;
- }
- }
- //结束百度编辑器
配置Ueditor
打开Ueditor目录下的ueditor.config.js
文件,找到30行,并做如下配置:
- //为编辑器实例添加一个路径,这个不能被注释
- UEDITOR_HOME_URL :'/include/ueditor/'
现在到网站后台设置中“系统设置>系统基本参数>核心设置”中把“Html编辑器”改为ueditor
,也就是前面在include目录中创建的那个文件夹。此时到网站后台,就可以看到成功加载Ueditor了,试一下文件上传等没有问题。搞定了吗?No,还没有呢。
在修改/ueditor/php/config.json 将里面的路径改成你想要的,一般要去掉。更改所有/ueditor/php/upload,替换成/uploads
由于之前有位朋友跟我说添加了百度编辑器,使其内容无法保存。解决办法如下:
1、修改\dede\templets\ 目录下 的 catalog_edit.htm 及 catalog_add.htm两个文件。
2、搜索到function checkSubmit() 在函数 return true; 前 添加以下代码:
document.getElementsByName( "content" )[0].innerHTML = ue.getContent(); |
3、修改后的代码如下:
function checkSubmit() { if (document.form1.typename.value== "" ){ alert( "栏目名称不能为空!" ); document.form1.typename.focus(); return false ; } document.getElementsByName( "content" )[0].innerHTML = ue.getContent(); return true ; } |
注:本解决方法由网友提供,暂没亲测(因为我没有遇到此情况)。
此方法借鉴了: http://www.lyblog.net/2014/453.html (但Ueditor1.4.3和1.3.6配置要更简单。)
完美源码 » 百度ueditor1.4.3 整合到DedeCMS-V5.7SP1