dede安装百度编辑器-DEDE建站-盈思创科技

准备工作

下载最新版 UEditor
（图片来源网络，侵删）
- 访问百度 UEditor 的官方 GitHub 仓库：https://github.com/fex-team/ueditor
- 在仓库页面,点击右侧的 "Releases" 或 "Tags" 标签。
- 找到最新的稳定版本（v1.4.3.3），下载 utf8-php 版本的压缩包。请务必选择 utf8-php 版本，因为这是为 PHP 语言和 UTF-8 编码环境打包的，与 DedeCMS 完全兼容。
- 下载完成后,你会得到一个类似 ueditor1_4_3_3-utf8-php.zip 的文件。
登录你的网站服务器

你需要通过 FTP 或文件管理器（如 cPanel、宝塔面板等）登录到你的网站服务器。

详细安装步骤

第一步：上传并解压 UEditor 文件

解压下载的 UEditor 包：在你的电脑上，将 ueditor1_4_3_3-utf8-php.zip 解压，你会得到一个名为 ueditor1_4_3_3-utf8-php 的文件夹。
重命名文件夹（可选但推荐）：为了方便管理和路径配置，建议将文件夹重命名为更简洁的名字，ueditor。

上传到服务器：将重命名后的 ueditor 文件夹，通过 FTP 上传到你的 DedeCMS 网站的根目录（）下。

上传后，你的服务器目录结构应该如下：

/wwwroot/yourwebsite/          <-- 网站根目录
├── /ueditor/                  <-- 刚刚上传的 UEditor 文件夹
│   ├── /dist/                 <-- 核心文件
│   ├── /php/                  <-- PHP 后端处理文件
│   ├── /themes/               <-- 编辑器主题
│   └── ... (其他文件和文件夹)
├── /dede/                     <-- DedeCMS 后台管理目录
├── /include/                  <-- DedeCMS 核心函数库
├── /templets/                 <-- DedeCMS 模板目录
└── ... (其他 DedeCMS 文件夹)

第二步：修改 DedeCMS 核心文件以集成 UEditor

这是最关键的一步,我们需要修改 DedeCMS 的文件，让它在新发布文章或文档时，调用 UEditor 而不是原来的编辑器。

找到并编辑 article_add.php 文件
- 路径：/dede/article_add.php
- 目的：修改发布新文章的页面。
- 操作：
  - 用代码编辑器（如 VS Code, Sublime Text, Notepad++）打开 article_add.php 文件。
  - 找到大约在第 484 行的代码（版本不同可能略有差异），这行代码引入了编辑器：
```
require_once(DEDEINC.'/editor/editor.php');
```
  - 将其注释掉或删除，并替换为引入 UEditor 的代码：
```
// require_once(DEDEINC.'/editor/editor.php'); // 注释掉或删除原来的编辑器引入
require_once(DEDEROOT.'/ueditor/ueditor.config.php'); // 引入 UEditor 配置文件
require_once(DEDEROOT.'/ueditor/ueditor.all.min.js'); // 引入 UEditor 核心JS
// 如果你的网站有 jQuery，可以取消下面这行的注释，UEditor 依赖它
// require_once(DEDEADMIN.'/../include/dedeajax2.js');
```
    注意：DEDEROOT 是 DedeCMS 定义的一个常量，通常指向你的网站根目录。/ueditor/... 这样的路径是正确的。
找到并编辑 article_edit.php 文件
- 路径：/dede/article_edit.php
- 目的：修改编辑已有文章的页面。
- 操作：
  - 打开 article_edit.php 文件。
  - 找到与 article_add.php 中几乎完全相同的代码行（大约在第 475 行左右）：
```
require_once(DEDEINC.'/editor/editor.php');
```
  - 用同样的方式,注释掉或删除，并替换为 UEditor 的引入代码：
```
// require_once(DEDEINC.'/editor/editor.php'); // 注释掉或删除原来的编辑器引入
require_once(DEDEROOT.'/ueditor/ueditor.config.php');
require_once(DEDEROOT.'/ueditor/ueditor.all.min.js');
// require_once(DEDEADMIN.'/../include/dedeajax2.js');
```

找到并编辑 js/editor.js 文件

路径：/dede/js/editor.js
目的：这是 DedeCMS 调用编辑器的核心 JS 文件，我们需要修改它，让它不再创建旧编辑器，而是创建 UEditor 实例。

操作：

打开 /dede/js/editor.js 文件。

这个文件内容较多,我们只需要修改最后部分，找到 function CreateEditor() 函数，并完全替换这个函数的内容为以下代码：

function CreateEditor(fname, eid, type)
{
  // 获取内容容器
  var contentBox = document.getElementById(eid);
  if(!contentBox) {
      alert('指定的内容容器不存在！');
      return;
  }
  // 清空容器，准备插入 UEditor
  contentBox.innerHTML = '';
  // 实例化 UEditor
  // UE.getEditor 是 UEditor 提供的全局方法
  // fname 是表单名，type 是编辑器类型（'default'）
  var editor = UE.getEditor(eid, {
      // UEditor 初始化配置项，可以自定义
      initialFrameWidth: '100%', // 宽度100%
      initialFrameHeight: 350,   // 高度350px
      toolbars: [
          ['fullscreen', 'source', '|', 'undo', 'redo', '|',
           'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
           'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
           'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
           'directionalityltr', 'directionalityrtl', 'indent', '|',
           'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
           'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
           'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
           'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
           'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
           'print', 'preview', 'searchreplace', 'help', 'drafts']
      ]
  });
  // 返回编辑器实例，供其他函数调用
  return editor;
}

这段代码会清空原来的编辑器容器,然后使用 UE.getEditor() 方法创建一个新的 UEditor 实例。eid 参数（通常是 body 或 content）会被用作编辑器的 id。

第三步：修改模板文件（可选，但推荐）

为了让编辑器在前台（如会员中心、自定义发布页面）也能正常工作，你可能需要修改对应的模板文件。

前台会员中心发布文章模板：
- 路径：/templets/member/article_add.htm
- 操作：找到 <textarea name="body" id="body"></textarea> 这一行，确保它的 id 是 body，然后在其后添加一个 div 作为 UEditor 的容器，并设置 id 与 textarea 相同。
```
<textarea name="body" id="body" style="display:none;"></textarea>
<div id="body" style="width:100%;height:350px;"></div>
```
  注意：这里将 textarea 隐藏了，因为 UEditor 会自己创建一个隐藏的 textarea 来同步数据。
后台编辑文章模板：
- 路径：/dede/templets/article_edit.htm
- 操作：同样，找到 <textarea name="body" id="body">，在其后添加一个 div 容器。

第四步：清理缓存并测试

清理 DedeCMS 缓存：
- 登录你的 DedeCMS 后台。
- 点击顶部菜单的 “系统” -> “一键更新网站”。
- 在左侧菜单中,点击 “更新HTML” -> “更新文档HTML”，然后选择“所有栏目”，点击“开始更新”。
- 这个过程会重新生成页面,确保新的 JS 和 CSS 文件被正确加载。
测试：
- 进入 DedeCMS 后台，点击 “核心” -> 发布” -> “添加文档”。
- 如果一切顺利,你应该能看到一个功能强大的百度 UEditor 编辑器，而不是原来的那个简陋的编辑器。
- 尝试输入一些文字、插入图片、设置格式，然后点击“保存”，保存后，再去编辑这篇文章，看编辑器是否能正确加载之前的内容。

常见问题与解决方案

问题1：编辑器加载不出来，或者只显示一个灰色框。
- 原因：通常是 JS 或 CSS 文件路径错误。
- 解决方案：
  1. 检查浏览器控制台（按 F12 打开）看有没有 404 错误。
  2. 确认 ueditor 文件夹是否在网站根目录。
  3. 确认 editor.js 文件中的 require_once 路径是否正确。
问题2：图片上传失败。
- 原因：最常见的原因是服务器权限不足，或者 ueditor/php 目录没有写入权限。
- 解决方案：
  1. 给 ueditor/php 目录设置 777 的读写权限（Linux/服务器环境下）。
  2. 检查 ueditor/php/config.json 文件中的上传路径配置是否正确，并确保该路径有写入权限。
  3. 检查服务器的 php.ini 文件中的 upload_max_filesize 和 post_max_size 设置，确保上传的图片大小没有超出限制。
问题3：前台会员中心不显示 UEditor。
- 原因：js/editor.js 文件没有被前台页面正确加载。
- 解决方案：检查前台模板（如 article_add.htm）是否引入了 /dede/js/editor.js 文件，DedeCMS 的会员中心模板会自动引入，如果没有，需要手动添加。
问题4：保存后内容为空或内容丢失。
- 原因：通常是 textarea 的 id 和 UEditor 实例化的 id 不匹配，或者表单提交逻辑有问题。
- 解决方案：仔细检查 editor.js 中 CreateEditor 函数的 eid 参数，以及模板中 textarea 的 id，确保它们完全一致。

进阶配置

如果你想要自定义 UEditor 的功能，比如修改工具栏、调整默认高度、配置图片上传路径等，可以编辑 ueditor/php/config.json 文件，这个文件是 UEditor 的后端配置核心，里面有非常详细的注释，你可以根据需要修改。

修改默认图片上传路径：

// 在 config.json 中找到 "imagePathFormat" 这一行
"imagePathFormat": "/uploads/image/{yyyy}{mm}{dd}/{time}{rand:6}",

这表示上传的图片会保存在 /uploads/image/ 目录下，并按日期和随机数命名。

希望这份详细的教程能帮助你成功在 DedeCMS 中集成百度编辑器！如果在操作过程中遇到任何问题，可以随时提问。

dede安装百度编辑器