百度编辑器如何添加到dede系统？-DEDE建站-盈思创科技

下面我将为你提供一个详细、分步的教程，涵盖了从下载安装到基本配置的全过程，这个过程主要针对 DedeCMS V5.7 及其后续版本，因为它们普遍采用 jQuery，与 UEditor 的集成更顺畅。

（图片来源网络，侵删）

核心思路

集成 UEditor 到 DedeCMS 主要分为以下几个步骤：

下载 UEditor：从百度官方获取最新版本的编辑器源码。
上传文件：将下载的文件上传到 DedeCMS 的指定目录。
修改核心文件：修改 DedeCMS 中调用编辑器的核心文件，用 UEditor 替换掉默认的编辑器。
修改后台模板：修改后台内容编辑页面的模板，以适应 UEditor 的样式和功能。
配置与测试：进行必要的配置,并测试编辑器是否正常工作。

详细步骤教程

第一步：下载 UEditor 源码

访问 UEditor 官方代码仓库：https://github.com/fex-team/ueditor
在仓库页面，点击绿色的 "Code" 按钮，然后选择 "Download ZIP" 下载完整源码。
将下载的 ZIP 文件解压缩，你会得到一个名为 ueditor 的文件夹。注意：这个文件夹包含了多个版本（如 jsp, asp, net, php），由于 DedeCMS 是 PHP 语言的，你需要进入 php 目录。最终我们要上传到服务器的，是 ueditor 文件夹下的 php 目录里的所有内容。

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

使用 FTP 工具（如 FileZilla）登录你的网站服务器。
找到 DedeCMS 的安装目录，通常位于 /dedecms/ 或类似路径。
进入 DedeCMS 的根目录，找到并上传 ueditor 文件夹，你可以将它放在与 dede、include 等同级的目录下。
- 推荐路径：/你的网站根目录/ueditor/
重要：确保 ueditor 目录及其内部的 php、utf-8 等目录和文件的权限是正确的，通常设置为 755 或 644，以确保 PHP 脚本可以正常读写文件。

第三步：修改核心调用文件

这是最关键的一步，我们需要让 DedeCMS 在调用编辑器时，加载 UEditor 的代码。

找到并打开 DedeCMS 的核心类文件：/include/dedemodule.class.php
在这个文件中，找到 GetEditor 函数（大约在第 400 行左右，不同版本可能略有差异）。
备份原文件：在修改之前，务必备份 dedemodule.class.php。
替换函数内容：将 GetEditor 函数内的代码完全替换为以下代码，这段代码会根据传入的 type 参数来决定加载哪种编辑器。

/**
 * 获得一个编辑器实例
 *
 * @access public
 * @param string $fname  表单名称
 * @param string $htmedit  是否为HTML编辑器
 * @param string $nobody  是否显示默认内容
 * @param string $etype  编辑器类型，默认为 'dede'
 * @param string $gtype  设置版式，默认为 'one'
 * @param string $width  编辑器宽度
 * @param string $height  编辑器高度
 * @return string
 */
function GetEditor($fname, $htmedit = 'yes', $nobody = 'no', $etype = 'ueditor', $gtype = 'one', $width = '700', $height = '400')
{
    // 如果是UEditor，直接输出UEditor的JS和HTML结构
    if ($etype == 'ueditor') {
        global $cfg_basedir, $cfg_phpurl;
        // UEditor的路径，根据你上传的实际路径修改
        $ueditor_path = $cfg_phpurl . '/ueditor/';
        // 构建UEditor的配置
        $config_str = "'serverUrl': '" . $ueditor_path . "php/controller.php',";
        $config_str .= "'initialFrameWidth': '" . $width . "',";
        $config_str .= "'initialFrameHeight': '" . $height . "',";
        // 可以在这里添加更多UEditor的配置项
        // 输出UEditor的JS初始化代码和textarea
        $editor_html = <<<EOT
<script type="text/javascript" charset="utf-8" src="{$ueditor_path}ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="{$ueditor_path}ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="{$ueditor_path}lang/zh-cn/zh-cn.js"></script>
<textarea name="{$fname}" id="{$fname}" style="width:{$width}px;height:{$height}px;">{$GLOBALS[$fname]}</textarea>
<script type="text/javascript">
    var {$fname} = UE.getEditor('{$fname}', {
        {$config_str}
    });
</script>
EOT;
        return $editor_html;
    }
    // ------------------- 以下是原代码，用于加载Dede默认编辑器 -------------------
    // 如果传入的etype不是'ueditor'，则使用原来的逻辑加载Dede默认编辑器
    if ($htmedit == 'yes') {
        $fvalue = $GLOBALS[$fname];
        $tyepArray = array('member' => 2, 'feedback' => 1, 'guestbook' => 1);
        $eConfig = array(
            'basic' => 1,
            'advance' => 1,
            'spec' => 1,
            'more' => 1,
            'baseSet' => 1,
            'fullPage' => 1,
            'isLoadModule' => 1
        );
        $editorname = $fname;
        $showconfig = $eConfig;
        $loadfile = array();
        $loadfile['css'] = 'css/';
        $loadfile['js'] = 'js/';
        $loadfile['images'] = 'images/';
        $loadfile['dialog'] = 'dialog/';
        $loadfile['post'] = $cfg_phpurl . '/post.php';
        $loadfile['img'] = $cfg_cmspath . '/images';
        $loadfile['skin'] = $cfg_cmspath . '/images/editor';
        $loadfile['dopost'] = 'save';
        $loadfile['doaction'] = $doaction;
        $loadfile['channelid'] = $channelid;
        $loadfile['id'] = $id;
        $loadfile['mtype'] = $mtype;
        $loadfile['ckobj'] = '';
        $loadfile['toolbar'] = 'member';
        $loadfile['toolbars'] = $showconfig;
        $loadfile['module'] = $loadfile;
        $loadfile['editorname'] = $editorname;
        $loadfile['fvalue'] = $fvalue;
        $loadfile['etype'] = $etype;
        $loadfile['gtype'] = $gtype;
        $loadfile['width'] = $width;
        $loadfile['height'] = $height;
        $loadfile['nobody'] = $nobody;
        $loadfile['type'] = isset($tyepArray[$etype]) ? $tyepArray[$etype] : 0;
        $loadfile['dopost'] = 'save';
        $loadfile['ckmediadir'] = $cfg_cmspath . '/uploads';
        $loadfile['ckuserdir'] = $cfg_cmspath . '/uploads';
        $editorname = $fname;
        $loadfile['editorname'] = $editorname;
        $html = LoadEditor($loadfile);
        return $html;
    } else {
        $fvalue = $GLOBALS[$fname];
        if ($nobody == 'yes') $fvalue = '';
        $html = "<textarea name=\"$fname\" id=\"$fname\" style=\"width:$width;height:$height\">$fvalue</textarea>\r\n";
        return $html;
    }
}

代码解释：

我们修改了 GetEditor 函数，增加了一个 $etype 参数，默认值设为 'ueditor'。
当 $etype 为 'ueditor' 时，函数会直接输出 UEditor 所需的 CSS、JS 文件引用，以及一个 <textarea> 和一段初始化 UEditor 的 JavaScript 代码。
$ueditor_path 变量定义了 UEditor 的路径，请确保它指向你上传的目录。$cfg_phpurl 是 DedeCMS 中定义的 PHP 文件目录变量，通常指向 /dede/。
$etype 不是 'ueditor'，函数会按原来的逻辑执行，加载 DedeCMS 默认的编辑器，这样保证了其他地方（如会员中心）不受影响。

第四步：修改后台模板

现在我们需要告诉 DedeCMS 在哪些地方使用 UEditor,我们通过修改内容模型的模板来实现。

（图片来源网络，侵删）

模型编辑的模板文件：/dede/templets/htm_edit.htm
备份原文件：同样，先备份 htm_edit.htm。
修改调用代码：在这个文件中，找到调用 GetEditor 函数的地方，通常是在 article_edit.php 文件中通过 include 引入的，我们需要修改 article_edit.php。
打开文件：/dede/article_edit.php

找到类似这样的代码段（可能在 if($dopost=='save') 之前）：

$body = "<textarea name='body' id='body' style='width:100%;height:400px;visibility:hidden;'>".$arcBody."</textarea>\r\n";
$body .= "<script type='text/javascript'>";
$body .= "CreateEditor('body');";
$body .= "</script>";

将其替换为：

// 使用我们自定义的GetEditor函数来加载UEditor
// 参数：表单名, 是否HTML编辑器, 是否无内容, 编辑器类型
$body = GetEditor('body', 'yes', 'no', 'ueditor', 'one', '100%', '400px');

'ueditor' 这个参数就是我们之前在 dedemodule.class.php 中定义的，用来触发 UEditor 加载的关键。

第五步：配置与测试

清空缓存：登录 DedeCMS 后台，进入【系统】->【SQL命令行工具】，执行 delete from dede_arccache; 清空文章缓存。
检查权限：确保 ueditor 目录下的 php 目录有写入权限，因为 UEditor 需要上传图片等文件。
测试：
- 进入 DedeCMS 后台，点击【核心】->【内容模型管理】，选择一个你常用的模型（如“文章模型”），点击【增加内容】。
- 如果一切顺利，你应该能看到 UEditor 编辑器已经成功加载出来了。
- 尝试输入一些文字，使用工具栏的加粗、插入图片等功能,确保它们都能正常工作。

常见问题与解决方案

Q: 编辑器加载不出来，或者样式错乱？
- A1: 路径错误：检查 dedemodule.class.php 中 $ueditor_path 的路径是否正确，确保 ueditor 文件夹位于 /dede/ 目录下，那么路径应该是 /ueditor/。
- A2: JS/CSS文件路径错误：确认 ueditor.config.js 等文件的引用路径是否正确，可以右键查看网页源代码,检查这些文件是否能被正确加载。
- A3: jQuery冲突：UEditor 1.4.x 版本依赖 jQuery，如果你的 DedeCMS 后台已经加载了 jQuery，可能会导致冲突，可以尝试使用 UEditor 的 noConflict 版本或在 ueditor.config.js 中配置 //window.UEDITOR_CONFIG = { // ... } 来避免冲突。
Q: 上传图片/文件失败？
- A: 权限问题：这是最常见的原因，确保 ueditor/php/upload/ 目录以及其所有子目录有写入权限（通常是 755 或 777）。
- A: PHP配置问题：检查服务器的 php.ini 配置，确保 file_uploads 为 On，upload_max_filesize 和 post_max_size 足够大。
Q: 如何修改编辑器的默认宽度和高度？
- A: 在 dedemodule.class.php 的 $config_str 变量中修改 initialFrameWidth 和 initialFrameHeight 的值。"'initialFrameWidth': '900',", `"'initialFrameHeight': '500',"。

Q: 如何在多个模型中使用不同的编辑器？

（图片来源网络，侵删）

A: 你可以修改 article_edit.php 中的 GetEditor 调用，根据不同的模型ID（$channelid）来传递不同的 $etype 参数。

if($channelid == 1) { // 假设模型ID为1的是文章
    $body = GetEditor('body', 'yes', 'no', 'ueditor', 'one', '100%', '400px');
} else {
    $body = GetEditor('body', 'yes', 'no', 'dede', 'one', '100%', '400px'); // 其他模型用默认编辑器
}

通过以上步骤，你就可以成功地将功能强大的百度编辑器 UEditor 集成到 DedeCMS 中了。

百度编辑器如何添加到dede系统？

核心思路

详细步骤教程

第一步：下载 UEditor 源码

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

第三步：修改核心调用文件

第四步：修改后台模板

第五步：配置与测试

常见问题与解决方案

相关文章

目录[+]