dede升级后编辑器如何更换？-DEDE建站-盈思创科技

下面我将为你详细讲解如何为DedeCMS更换编辑器,以目前最流行和推荐的 百度的UEditor 为例，并补充其他编辑器的替换方法。

（图片来源网络，侵删）

核心思路

更换编辑器的核心步骤是：

下载新编辑器：获取新编辑器的完整文件包。
上传并覆盖：将新编辑器的文件上传到DedeCMS的指定目录。
修改配置文件：修改DedeCMS的后台文件，让它调用新的编辑器。
修改前台调用：如果前台（如文章发布页）也需要使用新编辑器，还需修改前台模板文件。

替换为百度 UEditor (强烈推荐)

UEditor功能强大,界面美观，插件丰富，是目前国内Web应用中最流行的编辑器之一。

第一步：下载 UEditor

访问 UEditor 官方下载页面：https://ueditor.baidu.com/website/download.html
选择适合你的版本,对于DedeCMS，通常选择 PHP版本。
下载后,你会得到一个压缩包，ueditor1_4_3_3-utf8-php.zip。
解压这个压缩包,你会看到一个 utf8-php 文件夹，里面包含了编辑器的所有文件。

第二步：上传文件到服务器

将解压后的 utf8-php 文件夹通过FTP或文件管理器上传到你的DedeCMS网站根目录下的 /include/ 文件夹中。
为了方便管理,可以将 utf8-php 文件夹重命名为 ueditor，这样路径就是 /include/ueditor/。

第三步：修改后台编辑器调用文件

这是最关键的一步,我们需要告诉DedeCMS的后台系统，不再使用旧的编辑器，而是使用UEditor。

找到DedeCMS的编辑器配置文件：/include/dedetemplate.cls.php
（图片来源网络，侵删）
用代码编辑器（如VS Code, Sublime Text, Notepad++）打开这个文件。
在文件中搜索 ShowEditor 函数，这个函数负责生成编辑器的HTML代码。

找到类似这样的代码块（旧版DedeCMS可能略有不同，但核心逻辑一致）：

// ... 在 ShowEditor 函数中 ...
// 旧版代码可能是这样的
if($this->editor=='fck')
{
    $fck = $GLOBALS['cfg_cmspath']."/include/dededitor/fckeditor.php";
    $str = "<script type=\"text/javascript\" src=\"$fck\"></script>\n";
    $str .= "<input type=\"hidden\" name=\"$ganname\" id=\"$ganname\" value=\"{$GLOBALS[$ganname]}\" />\n";
    $str .= "<script type=\"text/javascript\">\n";
    $str .= "var sBasePath = \"".$GLOBALS['cfg_cmspath']."/include/dededitor/\";\n";
    $str .= "var oFCKeditor = new FCKeditor( '$ganname' );\n";
    $str .= "oFCKeditor.BasePath = sBasePath ;\n";
    $str .= "oFCKeditor.Height = 350;\n";
    $str .= "oFCKeditor.ReplaceTextarea() ;\n";
    $str .= "</script>\n";
}
else // 默认为ckeditor
{
    // ... ckeditor 的代码 ...
}

替换为UEditor的调用代码，你需要找到 else 分支（或者其他默认编辑器的分支），将其替换为以下UEditor的代码：

（图片来源网络，侵删）

// ... 在 ShowEditor 函数中，替换掉旧的编辑器代码 ...
// 默认使用UEditor
else
{
    $str = "<script type=\"text/javascript\" charset=\"utf-8\" src=\"{$GLOBALS['cfg_cmspath']}/include/ueditor/ueditor.config.js\"></script>\n";
    $str .= "<script type=\"text/javascript\" charset=\"utf-8\" src=\"{$GLOBALS['cfg_cmspath']}/include/ueditor/ueditor.all.min.js\"></script>\n";
    $str .= "<link rel=\"stylesheet\" type=\"text/css\" href=\"{$GLOBALS['cfg_cmspath']}/include/ueditor/themes/default/css/ueditor.css\">\n";
    $str .= "<textarea name=\"$ganname\" id=\"$ganname\" style=\"width:100%;height:350px;\">{$GLOBALS[$ganname]}</textarea>\n";
    $str .= "<script type=\"text/javascript\">\n";
    $str .= "    var ue = UE.getEditor('$ganname');\n";
    $str .= "</script>\n";
}

代码解释：

src 指向了你上传的UEditor的核心JS和CSS文件路径。
<textarea> 是UEditor的容器，DedeCMS会在这里插入已有的内容 {$GLOBALS[$ganname]}。
UE.getEditor('$ganname') 是初始化编辑器的JS代码。

保存并关闭 dedetemplate.cls.php 文件。

第四步：修改前台编辑器调用（可选）

如果你的网站前台（比如用户发布文章、留言板等）也使用编辑器，并且你希望它们也变成UEditor，还需要修改前台模板。

找到前台模板文件：通常在 /templets/ 目录下，文章发布页模板是 /templets/default/article_add.htm。
搜索旧编辑器标签：在模板文件中找到类似 {dede:editor name='body' style='width:98%;height:400px'}{/dede:editor} 这样的标签。

替换为UEditor的HTML结构：将上述标签替换为UEditor的<textarea>和初始化脚本。

<!-- 替换掉 {dede:editor}...{/dede:editor} 这部分 -->
<script type="text/javascript" charset="utf-8" src="{dede:global.cfg_cmspath/}/include/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="{dede:global.cfg_cmspath/}/include/ueditor/ueditor.all.min.js"></script>
<link rel="stylesheet" type="text/css" href="{dede:global.cfg_cmspath/}/include/ueditor/themes/default/css/ueditor.css">
<textarea name="body" id="body" style="width:100%;height:400px;">{dede:field.body/}</textarea>
<script type="text/javascript">
    var ue = UE.getEditor('body');
</script>

第五步：清理缓存并测试

登录DedeCMS后台,点击“系统” -> “清除缓存”，或者直接删除 /data 目录下的 cache 文件夹。
前往后台“新增文章”页面，检查新编辑器是否已经成功加载。
如果是在前台修改的,也去对应的页面测试一下。

替换为 KindEditor

KindEditor也是一个非常优秀且轻量级的编辑器,操作步骤与UEditor类似。

第一步：下载 KindEditor

访问 KindEditor 官网下载PHP版本：http://kindeditor.net/down.php

第二步：上传文件

将下载的压缩包（如 kindeditor-4.1.11）解压，并上传到 /include/ 目录下，可以重命名为 kindeditor。

第三步：修改后台调用文件

同样修改 /include/dedetemplate.cls.php 文件中的 ShowEditor 函数，将旧的编辑器代码替换为KindEditor的调用代码：

// ... 在 ShowEditor 函数中，替换掉旧的编辑器代码 ...
// 默认使用KindEditor
else
{
    $str = "<script type=\"text/javascript\" charset=\"utf-8\" src=\"{$GLOBALS['cfg_cmspath']}/include/kindeditor/kindeditor-min.js\"></script>\n";
    $str .= "<script type=\"text/javascript\">\n";
    $str .= "    var KE = KindEditor;\n";
    $str .= "    var editor = KE.create('#$ganname', {\n";
    $str .= "        cssPath : '{$GLOBALS['cfg_cmspath']}/include/kindeditor/themes/default/default.css',\n";
    $str .= "        allowFileManager : true,\n";
    $str .= "        uploadJson : '{$GLOBALS['cfg_cmspath']}/include/kindeditor/php/upload_json.php',\n";
    $str .= "        fileManagerJson : '{$GLOBALS['cfg_cmspath']}/include/kindeditor/php/file_manager_json.php',\n";
    $str .= "        afterCreate : function() {\n";
    $str .= "            this.sync();\n";
    $str .= "        }\n";
    $str .= "    });\n";
    $str .= "</script>\n";
    $str .= "<textarea name=\"$ganname\" id=\"$ganname\" style=\"width:100%;height:350px;\">{$GLOBALS[$ganname]}</textarea>\n";
}

注意： KindEditor需要配置上传路径，确保 /include/kindeditor/php/ 目录有写入权限。

常见问题与解决方案

编辑器加载不出来，显示空白或报错
- 检查路径：确认JS和CSS文件的路径是否正确，是否指向了你上传的编辑器目录。
- 检查权限：确保编辑器目录（如/include/ueditor/）及其子目录有正确的读取权限。
- 检查JS错误：按F12打开浏览器开发者工具，查看Console（控制台）是否有JS错误信息，这通常能直接定位问题。
- 确认修改：确保你已经正确修改了 dedetemplate.cls.php 文件，并清除了缓存。
图片/视频上传失败
- UEditor：检查 ueditor/php/ 目录是否有写入权限，这是UEditor处理上传的目录。
- KindEditor：检查 kindeditor/php/ 目录权限，并确认 upload_json.php 和 file_manager_json.php 中的配置路径是否正确。
- 安全限制：部分服务器环境（如open_basedir）会限制PHP的文件访问范围，可能导致上传失败，需要修改php.ini或联系主机商。
前台和后台编辑器不一致

你可能只修改了后台的调用文件,而忘记修改前台模板文件，请按照“方法一第四步”的说明，检查并修改前台模板。
样式错乱

检查CSS文件路径是否正确,或者是否存在其他CSS样式（如模板自身的CSS）与编辑器样式发生冲突。

通过以上步骤,你应该可以成功为你的DedeCMS升级更换到一个功能更强大、更现代的编辑器，祝你操作顺利！

dede升级后编辑器如何更换？