kindeditor dede插件如何安装使用？

“KindEditor dede 插件” 这个说法其实有两层含义：

1. 集成/整合：将 KindEditor 编辑器无缝集成到织梦的后台编辑器中，替换掉默认的编辑器，这是最常见的需求。
2. 功能插件：专门为织梦定制，并打包成插件形式（.zip）的 KindEditor，一键即可安装。

下面我将从这两个角度,为您提供最完整、最详细的操作指南。

手动集成 KindEditor 到织梦后台 (最通用、最稳定)

这种方法的核心是修改织梦的模板文件,用 KindEditor 的代码替换掉默认编辑器的代码，虽然步骤稍多，但可控性最强，适用于任何版本的 KindEditor 和织梦。

第 1 步：下载并准备文件

1. 下载 KindEditor：

   • 访问 KindEditor 官方网站：https://www.kindsoft.net/
   • 下载最新稳定版（kindeditor-x.x.x.zip）。
   • 将下载的压缩包解压到你的网站目录下,为了方便管理，建议放在 /static/js/kindeditor/ 路径下（如果没有，请自行创建）。

2. 备份织梦文件：

   
   （图片来源网络，侵删）
   • 在进行任何修改前,请务必备份你的织梦后台文件，特别是 dede/ 目录下的文件。

第 2 步：修改织梦编辑器模板文件

这是最关键的一步,我们需要找到并修改织梦调用编辑器的模板文件。

1. 找到模板文件：

   • 织梦大部分内容编辑页面（如文章、软件、单页等）都使用同一个模板文件：/dede/templets/article_edit.htm。
   • 注意：如果你的网站使用了自定义模板，请检查你的模板目录中是否有覆盖此文件。

2. 修改 article_edit.htm：

   • 用代码编辑器（如 VS Code, Sublime Text, Notepad++）打开 article_edit.htm 文件。

     
     （图片来源网络，侵删）

   • 找到并删除旧的编辑器代码： 搜索 GetEditor，你会找到类似这样的代码块：

     <textarea name='body' id='body' style='width:100%;height:400px;visibility:hidden;'></textarea>
     <script language='javascript'>
     // 实例化编辑器
     var editor = KindEditor.create('#body');
     </script>

     或者：

     <?php GetEditor("body",$body,"300","100%",""); ?>

     你需要将这些代码完整地删除或注释掉。

   • 插入新的 KindEditor 代码： 在刚才删除代码的位置，粘贴以下全新的 KindEditor 初始化代码。

     <!-- KindEditor 编辑器 -->
     <textarea name="body" id="body" style="width:100%; height:400px; visibility:hidden;">
     {dede:field.body/}
     </textarea>
     <script>
     // KindEditor 4.1.7
     var editor;
     KindEditor.ready(function(K) {
         editor = K.create('#body', {
             allowFileManager : true, // 允许浏览服务器文件
             uploadJson : '/static/js/kindeditor/php/upload_json.php', // 上传文件处理脚本路径
             fileManagerJson : '/static/js/kindeditor/php/file_manager_json.php', // 文件管理器路径
             // 更多配置项...
             width: '100%',
             height: '400px',
             resizeType : 1,
             afterBlur: function(){this.sync();} // 失去焦点时同步内容到textarea
         });
     });
     </script>

     代码解释：

     • {dede:field.body/}：这是织梦的模板标签，用于显示文章的已有内容。
     • allowFileManager : true：开启文件管理器，可以在编辑器里直接上传和管理图片、文件，非常方便。
     • uploadJson 和 fileManagerJson：这两个路径是核心，必须指向你解压后的 KindEditor 文件夹中的 php 目录下的对应文件。请确保路径正确！
     • afterBlur: function(){this.sync();}：这个功能非常重要，它可以在你点击其他地方时，自动将编辑器里的内容同步到隐藏的 textarea 中，确保内容能被正确提交到服务器。

第 3 步：配置上传路径

为了能成功上传图片和文件,你需要修改 KindEditor 的配置文件。

1. 找到配置文件：

   • 路径：/static/js/kindeditor/php/config.php

2. 修改关键配置：

   • 打开 config.php，找到以下几行并修改：

   • 图片上传目录：

     // 根目录路径
     $root_path = '../../../uploads/'; // 注意：这里要改成你网站的上传目录
     // 目录名称
     $image_dir = 'allimg/';

     • $root_path 是相对于 config.php 文件的路径。 表示向上三级，如果你的 config.php 在 /static/js/kindeditor/php/， 就指向了网站根目录。uploads/ 是织梦默认的上传目录，你可以改成你自己的，uploads/kindeditor/。
     • $image_dir 是在 $root_path 下的子目录，用于存放图片。

   • 文件上传目录：

     // 根目录路径
     $root_path = '../../../uploads/'; // 和图片路径保持一致
     // 目录名称
     $file_dir = 'soft/';

     • 同样,$file_dir 用于存放上传的文件（如附件、压缩包等）。

   • URL 路径：

     // 网站URL
     $site_url = 'http://www.yourdomain.com/'; // 请务必改成你的网站域名

     这个地址必须是你的网站能通过公网访问到的完整域名,否则上传后图片无法显示。

第 4 步：设置目录权限

为了能让 PHP 脚本成功写入文件，你必须给上传目录设置可写权限。

• 通过 FTP 或服务器的文件管理器，将以下目录的权限设置为 755 或 777（777 有安全风险，建议先用 755，如果不行再试 777）。
  • 你网站根目录下的 uploads/ 目录。
  • 以及你在 config.php 中配置的所有子目录（如 allimg/, soft/ 等）。

第 5 步：清空缓存并测试

1. 登录织梦后台,进入“系统” -> “清除缓存”，点击“一键清除”。
2. 尝试发布一篇新文章,检查 KindEditor 是否正常加载，图片上传和文件管理功能是否可用。

使用现成的织梦 KindEditor 插件 (最简单)

如果你不想手动修改文件,可以寻找已经打包好的插件。

1. 搜索插件：

   • 在织梦官方论坛（dedecms.com）、一些织梦资源站（如“织梦模板吧”）等地方搜索关键词：“织梦 KindEditor 插件”、“dede 编辑器替换”。
   • 你会找到很多开发者打包好的插件,通常是一个 .zip 压缩包。

2. 安装插件：

   • 下载插件包,解压。
   • 按照插件包内的 readme.txt 或安装说明进行操作，通常步骤是：
     • 将插件包内的文件上传到织梦的 /dede/ 目录或指定目录。
     • 登录织梦后台,进入“模块” -> “上传新模块”，然后上传插件包中的 install.php 文件进行安装。
     • 安装成功后,在后台的“系统” -> “系统基本参数” -> “核心设置”中，可能会出现切换编辑器的选项。

3. 优缺点：

   • 优点：安装极其简单，一键搞定，适合新手。
   • 缺点：
     • 版本可能比较旧,不是最新的 KindEditor。
     • 可能包含不必要的代码或后门（安全风险）。
     • 定制化程度低,配置选项可能不如手动修改灵活。

常见问题与解决方案 (FAQ)

1. 问题：编辑器加载不出来，或者显示空白。

   • 原因：JavaScript 路径错误。
   • 解决：检查你在 article_edit.htm 中引入的 KindEditor 核心文件路径是否正确，通常需要手动在 <head> 部分添加：

     <script charset="utf-8" src="/static/js/kindeditor/kindeditor-all.js"></script>
     <script charset="utf-8" src="/static/js/kindeditor/lang/zh-CN.js"></script>

2. 问题：点击上传图片时，弹出“权限不足”或无法上传。

   • 原因：uploads 目录或其子目录没有写入权限。
   • 解决：通过 FTP 或服务器控制台，将 uploads 目录的权限设置为 755 或 777。

3. 问题：上传成功后，图片在编辑器里显示正常，但前台页面不显示。

   • 原因：config.php 中的 $site_url 配置错误，或者图片路径是绝对路径，而前台模板没有正确处理。
   • 解决：
     • 仔细检查 $site_url 是否是你的真实域名。
     • 确保你上传的图片是相对路径（如 /uploads/allimg/2025/10/a.jpg），KindEditor 默认应该会处理成相对路径，如果不行，可以检查 upload_json.php 文件，看返回的 url 字段是否正确。

4. 问题：想更换编辑器皮肤。

   • 解决：在 KindEditor 初始化代码中添加 theme 选项。

     editor = K.create('#body', {
         theme : 'simple', // 可以是 'default', 'simple', 'qq' 等
         // ... 其他配置
     });

     皮肤文件位于 KindEditor 的 themes/ 目录下。

对于绝大多数用户,强烈推荐使用方案一（手动集成），虽然前期需要花点时间配置，但换来的是稳定、安全和可控的编辑器体验，这对于长期维护网站至关重要。