dede如何更换百度编辑器？

教程总览

整个过程可以分为以下几个主要步骤：

1. 下载 UEditor 编辑器：获取最新版的 UEditor 程序包。
2. 备份原文件：在修改任何文件之前,务必备份！
3. 上传 UEditor 文件：将下载好的文件上传到网站服务器。
4. 修改 DedeCMS 核心文件：织梦需要知道如何调用新的编辑器。
5. 清理缓存：清除织梦缓存以使更改生效。
6. 验证效果：登录后台，发布文章,检查新编辑器是否成功加载。

第一步：下载 UEditor 编辑器

1. 访问官网：打开百度 UEditor 的官方网站。
   • 官网地址：https://ueditor.baidu.com/
2. 选择版本：在官网首页，点击“下载”。
3. 选择语言和版本：
   • 开发版：包含源码，适合二次开发,文件较大。
   • 生产版（推荐）：经过压缩和优化，适合直接使用,文件较小。
   • PHP 版本：请务必选择 PHP 版本，因为 DedeCMS 是 PHP 程序。
4. 下载：点击下载，你会得到一个 .zip 压缩包，ueditor1_4_3_3-php.zip（版本号可能不同）。

第二步：备份原文件

这是最重要的一步，请一定不要跳过！

1. 通过 FTP 或你的主机控制面板,连接到你的网站服务器。
2. 找到并下载以下文件夹，备份到你的电脑上：
   • /dede/ 目录（这是织梦的后台管理目录）
   • /include/ 目录（这是织梦的核心函数库目录）

第三步：上传 UEditor 文件

1. 解压下载的 UEditor 压缩包，你会得到一个名为 ueditor1_4_3_3-php 的文件夹（具体名称取决于你的下载版本）。
2. 重命名文件夹：为了方便管理和路径统一，建议将这个文件夹重命名为 ueditor。（重要！）
3. 上传到服务器：将重命名后的 ueditor 文件夹，通过 FTP 上传到你的网站根目录（）下。

你的网站根目录下应该有一个 /ueditor/ 文件夹。

第四步：修改 DedeCMS 核心文件

这是整个教程的核心，我们需要修改两个关键文件来让织梦“认识”并使用 UEditor。

文件 1：修改 /include/helpers/upload.helper.php

这个文件负责控制后台文章编辑器中图片、附件等上传按钮的行为。

1. 用代码编辑器（如 VS Code, Sublime Text, Notepad++）打开 /include/helpers/upload.helper.php 文件。
2. 找到 GetEditor 函数,这个函数定义了编辑器的初始化代码。
3. 将整个 GetEditor 函数内的代码替换为以下代码：

/**
 *  获得一个文本编辑器
 *
 * @access    public
 * @param     string $fname  表单名称
 * @param     string $value  默认值
 * @param     string $type   编辑器类型，'default' 为默认编辑器
 * @param     string $width  编辑器宽度
 * @param     string $height 编辑器高度
 * @return    string
 */
function GetEditor($fname, $value = '', $type = 'default', $width = '100%', $height = '400px')
{
    global $cfg_admin_skin;
    if ($type == 'default') {
        // 引入百度编辑器
        $str = '<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>';
        $str .= '<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script>';
        $str .= '<link rel="stylesheet" type="text/css" href="/ueditor/themes/default/css/ueditor.css"/>';
        $str .= '<script type="text/plain" id="' . $fname . '" name="' . $fname . '" style="width:' . $width . ';height:' . $height . ';">' . $value . '</script>';
        $str .= '<script type="text/javascript">';
        $str .= 'var ue = UE.getEditor(\'' . $fname . '\');';
        $str .= '</script>';
    } else {
        // 保持原有的默认编辑器不变，以防其他地方调用
        $fvalue = $value == '' ? '<p>请在这里输入内容...</p>' : $value;
        $str = "<textarea name=\"$fname\" id=\"$fname\" style=\"width:$width;height:$height;\">$fvalue</textarea>\r\n";
        if ($cfg_admin_skin == 'default') {
            $str .= "<script type=\"text/javascript\" src=\"../include/dedecode.js\"></script>\r\n";
            $str .= "<script type=\"text/javascript\" src=\"../images/js/editor.js\"></script>\r\n";
            $str .= "<script type=\"text/javascript\" src=\"../images/js/menu.js\"></script>\r\n";
            $str .= "<link rel='stylesheet' href='../images/style/sys.css' type='text/css' />\r\n";
            $str .= "<link rel='stylesheet' href='../images/style/box.css' type='text/css' />\r\n";
            $str .= "<script type=\"text/javascript\">CreateEditor(\"$fname\",\"$width\",\"$height\");</script>\r\n";
        } else {
            // 其他皮肤的处理逻辑...
        }
    }
    return $str;
}

代码解释：

• 我们判断 $type 参数，如果它是 'default'（这是织梦默认调用编辑器的方式），我们就加载 UEditor 所需的 JS 和 CSS 文件。
• 路径：/ueditor/ 是我们之前上传 UEditor 文件夹的路径,请确保这个路径是正确的。
• UE.getEditor() 是 UEditor 初始化的核心方法。
• $type 不是 'default'，则保留原有的编辑器逻辑,以保证系统的兼容性。

文件 2：修改 /dede/templets/article_add.htm (可选，但推荐)

这个文件是后台“增加文章”页面的模板，默认情况下，GetEditor 函数会被调用，但直接修改这个文件可以确保编辑器样式更美观，并且能解决一些旧版本 DedeCMS 的兼容性问题。

1. 打开 /dede/templets/article_add.htm 文件。
2. 找到大约第 400 行左右，包含 GetEditor("body", "{$body}", "","350px","350px") 的那一行。
3. 将这一行替换为：

   {dede:field.body function='GetEditor(@me, "default", "", "100%", "400px")'/}

   • @me：这是 DedeCMS 模板中的变量，代表 {$body} 的值。
   • "default"：明确告诉 GetEditor 函数使用我们定义的 UEditor 类型。
   • "100%" 和 "400px"：设置编辑器的宽度和高度,可以根据需要调整。

注意：新版本的 DedeCMS 可能已经使用了 {dede:field.body/} 这样的标签，并且通过 GetEditor 函数的第四个参数来控制样式，如果你的文件已经是 {dede:field.body/}，GetEditor 函数修改正确，那么这一步可以不做,但直接修改为上面的代码通常是最稳妥的方式。

第五步：清理缓存

1. 登录你的 DedeCMS 后台。
2. 在顶部菜单栏找到 “系统” -> “一键更新缓存”。
3. 点击“开始更新”，等待更新完成，这一步是为了让 DedeCMS 重新加载我们刚刚修改的 PHP 文件。

第六步：验证效果

1. 在后台菜单中，点击 “核心” -> “内容模型管理”。
2. 选择一个你常用的内容模型（文章”），点击后面的 [管理字段]。
3. 找到“文章内容”字段（通常是 body 字段），确保它的“显示”状态是“是”。
4. 返回后台首页，点击 ”。
5. 在弹出的文章编辑页面，你应该能看到已经成功加载了功能强大的百度 UEditor 界面！

如果成功看到，那么恭喜你,更换已经完成！

常见问题与解决方案

问题 1：编辑器加载失败，显示空白或报错。

• 原因：通常是 JS/CSS 文件路径错误。
• 解决方案：
  1. 检查 /include/helpers/upload.helper.php 文件中 UEditor 的路径是否正确，应该是 /ueditor/,确保你的文件夹名和路径完全一致。
  2. 打开浏览器开发者工具（按 F12），切换到“Console”（控制台）标签，查看是否有红色的 JS 错误信息,根据错误信息定位问题。
  3. 检查 /ueditor/ 文件夹是否已成功上传到网站根目录。

问题 2：编辑器加载出来了，但是图片、附件上传按钮点击没反应。

• 原因：这是 UEditor 的“图片上传”功能需要后端 PHP 程序支持，UEditor 自带了 PHP 的后端处理文件,但需要正确配置。
• 解决方案：
  1. 打开 /ueditor/php/config.json 文件。
  2. 找到 "imageUrlPrefix": "" 这一行，将它修改为你的网站域名，"imageUrlPrefix": "http://www.yourdomain.com"。
  3. 找到 "imagePathFormat" 配置项，确保它是一个可写的目录，默认值是 "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"，这表示图片会上传到 /ueditor/php/upload/ 目录下，请确保这个目录存在并且有写入权限（权限值设为 755 或 777）。
  4. 保存 config.json 文件,并重新上传到服务器。
  5. 再次尝试上传图片。

问题 3：更换后，前台文章页面的编辑器样式乱了。

• 原因：前台模板调用编辑器时也使用了 GetEditor 函数，导致加载了 UEditor,但可能样式或初始化参数不匹配。
• 解决方案：
  1. 检查你的前台文章内容模板文件（通常在 /templets/default/article_article.htm）。
  2. 找到 {dede:field.body/}
  3. 修改为：{dede:field.body function='GetEditor(@me, "default", "", "100%", "400px")'/},使其与后台保持一致。
  4. 清理缓存,刷新前台页面查看效果。