Ueditor与Dede如何实现图片上传？

1. 下载并部署 UEditor
2. 配置 UEditor，使其与 DedeCMS 兼容
3. 修改 DedeCMS 后台，将默认编辑器替换为 UEditor

第一步：下载并部署 UEditor

1. 下载 UEditor

   
   （图片来源网络，侵删）
   • 访问 UEditor 的官方 GitHub 仓库：https://github.com/fex-team/ueditor
   • 在 Releases 页面下载最新稳定版的 完整版 (PHP 版本)。
   • 下载后你会得到一个压缩包，ueditor1_4_3_3-php.zip。

2. 部署到 DedeCMS

   • 解压下载的压缩包。
   • 将解压后的文件夹（ueditor1_4_3_3-php）重命名为一个更简洁的名称，如 ueditor。
   • 使用 FTP 工具，将这个 ueditor 文件夹上传到你的 DedeCMS 网站的根目录下的 /dede/ 文件夹中。
   • 最终路径应该是：你的网站/dede/ueditor/

第二步：配置 UEditor

这是最关键的一步，需要修改 UEditor 的配置文件，使其图片、视频等文件能正确地上传到 DedeCMS 指定的目录。

1. 找到配置文件

   • 进入你刚刚上传的 /dede/ueditor/ 目录。
   • 找到并打开 config.json 文件，这个文件是 UEditor 的核心配置文件。

2. 修改图片上传配置

   
   （图片来源网络，侵删）
   • 在 config.json 文件中，找到 "image" 配置段。
   • 修改以下几个关键项：

   "image": {
       "maxSize": 2048,              // 图片最大大小，单位 KB
       "allowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], // 允许的图片后缀
       "fieldName": "upfile",         // 表单字段名，一般不用改
       // --- 以下是重点配置 ---
       "url": "/dede/ueditor/php/controller.php?action=uploadimage", // 上传图片的请求地址
       "imagePath": "/uploads/",      // **图片保存的根目录（相对于网站根目录）**
       "compress": true,              // 是否启用图片压缩
       "compressQuality": 80,          // 图片压缩质量
       "insertMaxSize": 2048,         // 插入图片的最大大小，单位 KB
       "imageUrlPrefix": "",          // 图片访问的前缀，如果你的图片不在网站根目录，需要在这里配置，"/你的网站目录"
       "config": {
           "scale": true
       },
       // ... 其他配置 ...
   },

   • "imagePath": 这个值非常重要，它定义了所有上传的图片都会存放在哪个目录下，这里我们设置为 "/uploads/"，意思是图片会存放在网站根目录下的 uploads 文件夹里，请确保你的 DedeCMS 已经创建了这个目录并且有写入权限。
   • "url": 这个地址是 UEditor 上传图片时请求的后端脚本，它指向 UEditor 自带的 controller.php，并指定了 action 为 uploadimage。

3. 修改其他文件上传配置（可选）

   • 同样地，如果你希望上传视频、附件等，也需要修改 config.json 中的 "video", "scrawl", "snapscreen", "catcher", "file" 等配置段。
   • 它们的配置方式与 "image" 类似，都需要设置正确的 "url" 和 "path"，视频可以上传到 "/uploads/video/"。

第三步：修改 DedeCMS，集成 UEditor

现在我们需要修改 DedeCMS 的后台文件，让它加载 UEditor 而不是默认的编辑器。

1. 创建 UEditor 的 JS 文件

   • 在 DedeCMS 的 /dede/ 目录下，创建一个新文件，命名为 ueditor.config.js。
   • 将 UEditor 官方示例中的 ueditor.config.js 文件内容复制进去，这个文件在 UEditor 包的 examples 目录下可以找到。
   • 关键修改：打开这个 ueditor.config.js 文件，找到 window.UEDITOR_CONFIG 对象，修改 UEDITOR_CONFIG.UEDITOR_HOME_URL 的值，指向你上传的 UEditor 目录。

   // 在 ueditor.config.js 文件中
   window.UEDITOR_CONFIG = {
       // ... 其他配置 ...
       UEDITOR_HOME_URL: '/dede/ueditor/' // 指向 UEditor 的根目录
   };

2. 修改文章内容编辑器页面

   • 找到 DedeCMS 后台的文章内容编辑器模板文件，这个文件通常位于： /dede/templets/article_edit.htm
   • 备份这个原始文件,以防出错。
   • 用代码编辑器打开 article_edit.htm。
   • 找到加载默认编辑器（如 ckeditor 或 fckeditor）的代码，通常是 <textarea> 标签和一些 JS 脚本。
   • 替换为 UEditor，找到 <textarea name="body" id="body">...</textarea> 这部分代码,将其替换为以下代码：

   <!-- 在 article_edit.htm 中替换掉原来的 textarea 和加载脚本 -->
   <script type="text/javascript" charset="utf-8" src="/dede/ueditor/ueditor.config.js"></script>
   <script type="text/javascript" charset="utf-8" src="/dede/ueditor/ueditor.all.min.js"></script>
   <!-- 如果需要视频上传等功能，还需要引入对应的 JS -->
   <script type="text/javascript" charset="utf-8" src="/dede/ueditor/lang/zh-cn/zh-cn.js"></script>
   <textarea name="body" id="body" style="width:100%;height:500px;">
       {dede:field.body/}
   </textarea>
   <script type="text/javascript">
       // 实例化编辑器
       var ue = UE.getEditor('body');
   </script>

   • 说明：
     • {dede:field.body/} 是 DedeCMS 的模板标签，用于输出文章内容,请务必保留。
     • 我们引入了 UEditor 的核心 JS 文件和配置文件。

3. 修改其他需要 UEditor 的页面

   • 除了文章编辑，你可能还需要在栏目内容、单页内容等地方使用 UEditor，请找到对应的模板文件，重复第 2 步的操作。
   • 常见文件包括：
     • /dede/templets/catalog_add.htm (添加栏目)
     • /dede/templets/catalog_edit.htm (编辑栏目)
     • /dede/templets/flink_add.htm (添加友情链接)
     • /dede/templets/flink_edit.htm (编辑友情链接)
     • /dede/templets/soft_add.htm (添加软件)
     • 等等...

第四步：检查权限和测试

1. 检查目录权限

   • 确保 uploads 目录（或你在 config.json 中配置的目录）具有 755 或 777 的写入权限,这是上传图片失败最常见的原因。
   • 确保 /dede/ueditor/php/ 目录下的文件有执行权限。

2. 清除缓存

   登录 DedeCMS 后台，在“系统” -> “系统设置” -> “清除缓存”中,清除所有缓存。

3. 测试上传

   • 发布” -> “添加文档”。
   • 编辑框中，点击“上传图片”按钮。
   • 选择一张本地图片进行上传。
   • 如果一切顺利，图片应该会成功上传,并插入到编辑器中。
   • 检查你的网站 uploads 目录,确认图片文件是否已存在。

常见问题与解决方案

• 问题：图片上传失败，提示“后台配置项没有正常加载，上传插件将不能正常工作！”

  • 原因：ueditor.config.js 文件中的 UEDITOR_HOME_URL 路径错误，或者 UEditor 文件未正确上传。
  • 解决：检查并修正 UEDITOR_HOME_URL 的路径，确保 /dede/ueditor/ 目录下的文件完整。

• 问题：图片上传成功，但前台无法显示，或者图片路径错误。

  • 原因：config.json 中的 "imagePath" 或 "imageUrlPrefix" 配置不正确。
  • 解决："imagePath" 应该是相对于网站根目录的路径，"/uploads/"。"imageUrlPrefix" 通常留空即可。

• 问题：点击上传按钮后无反应。

  • 原因：可能是 JS 文件路径错误,或者浏览器控制台有报错。
  • 解决：按 F12 打开浏览器开发者工具，查看 Console (控制台) 标签页,根据错误信息进行排查。

• 问题：DedeCMS 编辑器内容不保存。

  • 原因：替换 <textarea> 时，错误地修改了 name 或 id 属性，DedeCMS 提交表单时是靠 name 属性来识别字段的。
  • 解决：确保 <textarea> 的 name="body" 和 id="body" 与原来的一致。

通过以上步骤，你应该就能成功地在 DedeCMS 中集成 UEditor 并实现图片上传功能了。