快捷搜索： 　　nginx
笨牛网>建站>Dedecms> > DEDE整合Ueditor1.4.3.3 修正栏目内容、单页无法保存、图片加水印等问题 >

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

发布者: 匿名 围观次 点赞:4

dede使用Ueditor1.4.3.3 并修正单页栏目编辑器栏目内容、单页无法保存、图片加水印、图片附件保存目录、分页标签改变、远程图片自动本地化关闭，修改默认分页符，关闭HTML代码自动转义，回显HTM标签被过滤，开启代码高亮等一系列问题，经过这里整个教程的修改，ueditor就能完美的兼容dedecms织梦系统。
使用过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是你的后台目录)


dedeCMS栏目（栏目内容）

dede/templets/catalog_add.htm

dede/templets/catalog_edit.htm

把里面的 form 放置到
<td height="95" align="center" bgcolor="#FFFFFF">
内，就可以了。

用fireforx看源码可以发现有红色<form>标签错误，原来是这里导致ueditor 无法提交表单的值所致！！如图：

.

所以只要把form标记移动到td内部，firefox看源码就正常了。

.

 

dedeCMS单页(单页文档）

dede/templets/templets_one_add.htm

dede/templets/templets_one_edit.htm


templets_one_add.htm修改前：

熟悉织梦DedeCMS系统的伙伴们都知道，织梦自带的编辑器有点鸡肋啊，第一是不好编辑,第二有时候容易出问题，织梦的默认编辑器是ckeditor，没有插入代码的功能，不够强大。很多使用织梦的朋友都会选择把编辑器更换成更换成百度UEditor编辑器。UEditor编辑器是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码等。所以，UEditor编辑器受到很多站长朋友的青睐。但是，笔者发现织梦更换成百度UEditor编辑器后单页内容无法保存，经过反复的调试最后终于解决，今天分享给大家，希望对大家有所帮助。

这里我们需要把form开头部分放在上面的td下面，修改后为：

织梦更换成百度UEditor编辑器后单页内容无法保存


 结果测试 栏目内容和单页栏目已可提交数据。其他页面也无法提交数据也做同样处理即可！！

另外针对这个问题还有种修改方法，就是将栏目内容页和单页的默认编辑器设置回使用原来的CKEDITOR

   dedeCMS单页(单页文档）


　　dede/templets/templets_one_add.htm

　　dede/templets/templets_one_edit.htm


　　在GetEditor上面加一行代码，如下：


　　$GLOBALS['cfg_html_editor']='ckeditor';


　　即还原默认编辑器：ckeditor


　　dedeCMS栏目（栏目内容），修改：


　　dede/templets/catalog_add.htm

　　dede/templets/catalog_edit.htm


　　跟栏目文档修改方法相同。

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 //设置是否抓取远程图片

极个别情况下，这个参数可能不起作用，那就需要修改\include\ueditor\php\config.json

将里面的"catcherMaxSize":值改成非常小的数

比如我们是这样设置"catcherMaxSize": 2, /* 上传大小限制，单位B */


6、关闭HTML代码自动替换功能，HTML自动转义功能关闭方法，

如果你的网站不是类似我们这样需要分享源代码的站长类的网站，这个功能无须关闭，关闭可能有安全隐患，不建议关闭。我们下面提供的下载未关闭这个功能

首先是ueditor.config.js配置文件中

//,allowDivTransToP:true      //允许进入编辑器的div标签自动变成p标签

这里改成

allowDivTransToP:false      //允许进入编辑器的div标签自动变成p标签


然后打开ueditor.all.js

搜索allowDivTransToP,找到如下的代码，将true设置为false
 me.setOpt('allowDivTransToP',false);

查找

case 'style':
                    case 'script':
                        node.setAttr({
                            cdata_tag: node.tagName,
                            cdata_data: (node.innerHTML() || ''),
                            '_ue_custom_node_':'true'
                        });
                        node.tagName = 'div';
                        node.innerHTML('');
                        break;

全部删除


还有一个一劳永逸的办法ueditor.all.js定位代码大概9948行可搜索UE.plugins['defaultfilter']   直接添加return

UE.plugins['defaultfilter'] = function () {
    return;   //在这里添加return，不执行下面的格式化
    var me = this;
    me.setOpt({
        'allowDivTransToP':false,
        'disabledTableInTable':true

ueditor.all.min.js定位代码（可搜索【defaultfilter】定位，大概157行）

直接返回return

UE.plugins.defaultfilter=
function(){return;var d=this;d.setOpt({allowDivTransToP:!0,d


7、回显HTML标签过滤问题

跟上面第6条一样，这个不是必须的，只有源码类网站才需要，可能会遇到保存好的带html代码的文章再次编辑时，出现html标签被过滤的情况

根据ueditor官方描述：http://ueditor.baidu.com/website/helper.html  第10条，引用编辑器的内容框是采用的textare标签，解决办法就是替换为script标签。

    在开篇第一步，修改 inc_fun_funAdmin.php 文件，所添加的代码第16行：

<textarea name="'.$fname.'" id="'.$fname.'" style="width:100%;">'.$fvalue.'</textarea>

 将textarea标签替换为script标签即可，即：

<script name="'.$fname.'" id="'.$fname.'" style="width:100%;">'.$fvalue.'</script>

 这样，就可以完美解决标签过滤问题。同样这一步，我们没更新到下载文件中


8、代码高亮功能

对于在网站中出现代码的情况，希望前台页面代码显示高亮，只需要在内容页模板页头添加JS代码：

<link href="/织梦CMS目录/include/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" />    

<script type="text/javascript" src="/织梦CMS目录/include/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>

   


页尾引用语句：

<script type="text/javascript">         SyntaxHighlighter.all();          </script>

   


代码高亮换行问题

    代码高亮之后，在前台并没有出现自动换行的功能，可以使用强制换行代码。在shCoreDefault.css文件搜索如下代码，红色文字为需要添加的内容。


.syntaxhighlighter{width:100%!important;margin:.3em 0 .3em 0!important;position:relative!important;overflow:auto!important;background-color:#f5f5f5!important;border:1px solid #ccc!important;border-radius:4px!important;border-collapse:separate!important; 

word-wrap:break-word;

}

   


而shCoreDefault.css文件在目录 /织梦CMS目录/include/ueditor/third-party/SyntaxHighlighter/ 下。

至此，前台就可以显示如本文效果的 代码高亮。这一步同样跟前面一样只适合源码站


注意：如果你修改过这些配置的JS，却发现在浏览器中操作，没有任何变化，甚至整个UEDITOR的编辑框都消失，或者报错类似undefinedlang/zh-cn/zh-cn.js Failed to load resource: the server responded with a status of 404 (Not Found)  主要是CHROME类的核心浏览器缓存了ueditor的JS文件了，只需要在浏览器中输入https://你的域名/include/ueditor/ueditor.config.js  刷新几次直到看到你的修改变化出现，就行了



提供一份我们修改后的1.4.3.3版本DEDE能用的，直接上传覆盖就行

下载文件包

顶(4)
踩(0)
DEDE Ueditor 【搜索相关内容】[打印] [关闭]

您可能还会对下面的文章感兴趣：

相关文章

最新评论