奔牛网>建站>Dedecms>>DEDE整合Ueditor1.4.3.3 修正栏目内容、单页无法保存、图片加水印等问题
2017年07月21日

DEDE整合Ueditor1.4.3.3 修正栏目内容、单页无法保存、图片加水印等问题

dede使用Ueditor1.4.3.3 并修正单页栏目编辑器栏目内容、单页无法保存、加水印、图片附件保存目录、分页标签改变、远程图片自动本地化关闭等问题
使用过DedeCMS的人应该都能感觉到自带的可视化编辑器不好用。Dede在5.6版之前用的编辑器是FCKEditor,5.7之后改成了ckeditor,这两个编辑器其实是一家一样的。存在很多问题,比如用这个编辑器粘贴从Word复制过来的文字时,会产生大量的垃圾代码,不利于排版也不美观。

今天介绍一下如何将Dede默认的编辑器换成百度的Ueditor编辑器。

Ueditor是由百度web前端研发部开发的所见即所得富文本Web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用。目前已经成功部署在百度百科,百度新知,百度空间等产品上。其他非百度产品也有使用,如金山联盟,巨人网络,博客中国等。

在DedeCMS中使用UEditor的方法如下:
首先到百度的官网下载http://ueditor.baidu.com/website/download.html#ueditor   目前最新版是1.4.3.3 PHP版,然后根据你DEDE的语言版本选择UTF-8还是GB2312
下载下来,然后修改文件夹名称为“ueditor”,删除掉里面没用的index.html后上传到include目录下。

温馨提示:在安装前,最好备份下所要修改的文件。

打开include下的inc文件夹内的inc_func_funcAdmin.PHP找到112行,

if($GLOBALS['cfg_html_editor']=='fck')

换以下代码。


if($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.js"></script>
        <link rel="stylesheet" type="text/css" href="'.$GLOBALS['cfg_cmspath'].'/include/ueditor/themes/default/css/ueditor.css"/>
        <textarea name="'.$fname.'" id="'.$fname.'" style="width:100%;">'.$fvalue.'</textarea>
        <script type="text/javascript"> var ue = UE.getEditor("'.$fname.'");</script>';
        if($gtype=="print")
        {
        echo $code;
        }
        else
        {
        return $code;
        }
    }elseif
    ($GLOBALS['cfg_html_editor']=='fck')

 

第三步:修改配置 

进入网站后台-->系统-->系统基本参数-->核心设置-->将 Html编辑器的值改为 ueditor ,然后保存。 到了这一步,网上会说恭喜你,文本编辑器已经替换成功。其实还有很多兼容性要修改,看如下:

 

1、修改ueditor上传文件的路径,存放目录

include\ueditor\php\config.json

里面的

/ueditor/php/upload/image/

/ueditor/php/upload/video/

/ueditor/php/upload/file/

修改成自己的,如:

/uploads/allimg/

/uploads/media/

/uploads/soft/

另外如果要将图片默认保存路径改成和DEDE一致也就是yymmdd格式170721这样的,那还是得修改这个文件将里面的{yyyy}改成{yy}


另外如果需要将UEDITOR上传的文件路径变成绝对路径,也就是带你完整域名信息的链接(方便在子目录绑定二级域名情况下使用),还得修改config.json这个文件,所在目录为ueditor/php/config.json,用DW或者其他编辑器打开修改。

在第11行:

      "imageUrlPrefix": " ", /* 图片访问路径前缀 */

这段代码就是设置上传图片路径前缀,默认为空则生成的图片就是相对路径,我们改为:

      "imageUrlPrefix": "https://www.bnxb.com", /* 图片访问路径前缀 */

自行把域名换为自己的即可。
这样就能实现用Ueditor编辑器上传图片路径为绝对路径,细心的朋友可能还会发现此处还有一个bug,生成的绝对路径中,域名后面有两个"/",变成https://www.bnxb.com//upload/allimg/..这种样式,虽然也能正确获取到图片,但是不规范,我们继续做以下修改:
把第12行中的上传保存路径前面的第一个“/”去掉,像下面这样:

     "imagePathFormat": "ueditor/image/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

这样一来就完美实现了Ueditor编辑器上传图片路径为绝对路径。

 

2、dedecms织梦更换ueditor后栏目内容、单页无法保存问题的解决方法

打开

\dede\templets\catalog_add.htm     (dede是你的后台目录)
\dede\templets\catalog_edit.htm
把里面的 form 放置到
<td height="95" align="center" bgcolor="#FFFFFF">
内,就可以了。

网上是添加一段js代码,说是ueditor bug...
本人用fireforx看源码发现有红色<form>标签错误,原来是这里导致ueditor 无法提交表单的值所致!!如图:
.
所以只要把form标记移动到td内部,firefox看源码就正常了。
.
 
 
  结果测试 栏目内容和单页栏目已可提交数据。其他页面也无法提交数据也做同样处理即可!!

3、本地上传图片添加水印的解决方法

打开 \include\ueditor\php\action_upload.php 找到

include "Uploader.class.php";

在它下面加入

require_once("../../common.inc.php");
require_once("../../image.func.php");

再打开 \include\ueditor\php\Uploader.class.php 找到

$this->stateInfo = $this->stateMap[0];   大概在124行左右

在它下面加入

@WaterImg($this->filePath, 'down');

完成,这样上传本地图片和批量上传图片就自动加水印了。


4、百度编辑器默认分页符ueditor_page_break_tag替换成

百度默认点击分页功能按钮插入的分页符是ueditor_page_break_tag,DEDE是不认这个分页符的,DEDE的分页符是,因此需要修改
修改涉及到两个文件ueditor.all.js和ueditor.all.min.js,如果没有调用min文件,可以不修改。

打开/include/ueditor/ueditor.all.js,找到
me.setOpt('pageBreakTag','_ueditor_page_break_tag_');
把_ueditor_page_break_tag_替换成,经过测试过没有问题.

另外还有一个办法,修改ueditor根木下的ueditor.config.js
查找
//,pageBreakTag:'_ueditor_page_break_tag_'
改成
,pageBreakTag:''




5、关闭ueditor的图片本地化功能
ueditor的图片本地化功能与DEDE自带的重复,会造成重复下载,因此只能选择其一,这里选择将ueditor自带的图片本地化功能关闭
需要修改ueditor.config.js,这个文件在ueditor的根目录下,
查找
//,catchRemoteImageEnable: true //设置是否抓取远程图片

改成

,catchRemoteImageEnable: false //设置是否抓取远程图片


提供一份我们修改后的1.4.3.3版本DEDE能用的,直接上传覆盖就行
下载文件包
顶(0)
踩(0)
最新评论