kindeditor 织梦-织梦建站-盈思创科技

织梦系统默认使用的是非常老旧的 ckeditor 编辑器，功能简陋且体验不佳，KindEditor 是一个功能强大、界面美观、易于使用的国产富文本编辑器,是替换织梦默认编辑器的绝佳选择。

（图片来源网络，侵删）

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

准备工作：下载 KindEditor 编辑器。
上传文件：将 KindEditor 文件上传到你的织梦网站目录。
修改织梦文件：修改织梦的后台模板文件，引入 KindEditor。
配置编辑器：进行一些必要的配置，如上传路径、图片处理等。
清理缓存：更新缓存,查看效果。

第一步：准备工作 - 下载 KindEditor

访问 KindEditor 官方网站：http://kindeditor.net/
点击“下载”获取最新版本的编辑器。

下载后你会得到一个压缩包，kindeditor-x.x.x.zip，解压后,你会看到类似下面的文件结构：

（图片来源网络，侵删）

kindeditor-4.1.11/
├── asp/          // ASP 示例，我们不需要
├── asp.net/      // ASP.NET 示例，我们不需要
├── jsp/          // JSP 示例，我们不需要
├── php/          // PHP 示例，我们可能需要参考
├── kindeditor.js // 核心文件
├── kindeditor-min.js // 核心文件的压缩版
├── themes/       // 编辑器主题样式
├── plugins/      // 编辑器插件
└── ...其他文件

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

使用 FTP 工具（如 FileZilla）登录你的网站服务器。
在织梦网站的根目录（通常是）下创建一个新文件夹，kindeditor。
将解压后的 kindeditor 文件夹内的上传到你刚刚创建的 /kindeditor/ 目录下。

你的网站目录结构应该类似这样： 你的网站根目录/ ├── kindeditor/ (里面是解压后的所有文件) ├── dede/ (织梦后台目录) ├── include/ (织梦核心文件) └── ...其他织梦文件
（图片来源网络，侵删）

第三步：修改织梦后台模板文件

这是最关键的一步，我们需要告诉织梦，在内容编辑页面使用 KindEditor 而不是默认的编辑器。

找到模板文件：织梦后台的内容编辑器模板位于 dede/templets/ 目录下，你需要修改的是 article_edit.htm（用于编辑文章）和 article_add.htm（用于新增文章），为了确保所有内容都生效,最好两个文件都修改。
打开并编辑 article_edit.htm：用代码编辑器（如 VS Code, Sublime Text, Notepad++）打开 dede/templets/article_edit.htm 文件。

查找并替换默认编辑器代码：在文件中找到类似下面这样的代码块（织梦版本不同，代码可能略有差异，但核心是 class="ckeditor"）：

<!-- 这是织梦默认的编辑器代码，通常在 form 表单内 -->
<textarea name='body' id='body' style='width:100%;height:400px;visibility:hidden;'></textarea>
<script type="text/javascript">
    CKEDITOR.replace('body');
</script>

或者：

<textarea name="body" id="body"></textarea>
<script type="text/javascript" src="/include/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
    CKEDITOR.replace('body');
</script>

替换为 KindEditor 代码：将上面找到的默认编辑器代码，完全删除，然后替换为以下 KindEditor 的初始化代码：
```

<textarea name="body" id="body" style="width:100%;height:400px;"></textarea>
<script charset="utf-8" src="/kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="/kindeditor/lang/zh-CN.js"></script>
<script>
    KindEditor.ready(function(K) {
        K.create('#body', {
            allowFileManager : true, // 允许上传图片和文件
            uploadJson : '/kindeditor/php/upload_json.php', // 上传处理脚本
            fileManagerJson : '/kindeditor/php/file_manager_json.php', // 文件管理脚本
            allowImageUpload : true, // 允许上传图片
            allowFileUpload : true, // 允许上传文件
            // 更多配置项...
        });
    });
</script>
```
代码解释：
- <textarea>：这个标签本身是必须的，KindEditor 会将它替换成一个可视化的编辑器。name="body" 必须和织梦表单的字段名一致。
- src="/kindeditor/kindeditor.js"：引入 KindEditor 的核心 JS 文件,路径要确保正确。
- src="/kindeditor/lang/zh-CN.js"：引入中文语言包。
- K.create('#body', {...})：这是初始化 KindEditor 的核心代码。
  - '#body'：选择器，指向要被替换的 <textarea> 元素。
  - allowFileManager : true：开启文件管理器,可以在编辑器内直接上传和管理文件。
  - uploadJson 和 fileManagerJson：这两个路径指向了 KindEditor 自带的 PHP 上传和处理脚本。这是最关键的一步，直接关系到图片和文件能否上传成功。
同样修改 article_add.htm：重复第 3 和第 4 步，对 dede/templets/article_add.htm 文件进行完全相同的修改。

第四步：配置编辑器（非常重要）

直接使用上面的代码，图片和文件上传可能会失败，因为涉及到权限和路径问题，你需要对 KindEditor 的 PHP 脚本进行配置。

定位 PHP 配置文件：进入你上传的 /kindeditor/php/ 目录，找到 config.php 文件。
修改 config.php：打开 config.php,找到下面这几行代码并进行修改：
```
// 网站根目录路径，可以填写绝对路径，/var/www/html/
// 如果不设置，则自动获取
$root_path = str_replace('/kindeditor/php', '', str_replace('\\', '/', dirname(__FILE__)));
// 上传目录
$upload_path = $root_path . '/uploads/'; // 将上传的文件放在网站的 uploads 目录下
// 各个文件目录
$file_path = $upload_path; // 文件保存路径
$image_path = $upload_path . 'image/'; // 图片保存路径
$flash_path = $upload_path . 'flash/'; // Flash 保存路径
$media_path = $upload_path . 'media/'; // 多媒体保存路径
```
配置说明：
- $root_path：通常织梦的 uploads 目录就在网站根目录下，所以这里我们把它设置为自动获取，然后下面直接使用相对路径 /uploads/ 即可。
- $upload_path：这是所有上传文件的基础目录，我们将其指向织梦默认的 /uploads/ 目录，请确保你的网站有这个目录，并且有写入权限（755 或 777 权限，777 有安全风险，建议先用 755 测试）。
- $image_path, $flash_path 等：这些是子目录，KindEditor 会自动在 /uploads/ 目录下创建它们,用于分类存储不同类型的文件。
检查目录权限：登录你的服务器，给 /uploads/ 目录及其所有子目录（如 image, flash 等）赋予 写入权限。
- Linux 命令：chmod -R 755 /你的网站目录/uploads/ (推荐) 或 chmod -R 777 /你的网站目录/uploads/ (755 不行，可以临时用 777 测试)。
- FTP 工具：右键点击 uploads 文件夹，选择“文件权限”，将数字设置为 755 或 777。

第五步：清理缓存并测试

登录织梦后台。
在顶部菜单栏找到 “系统” -> “清除所有缓存”,点击执行。
清除缓存后，进入 发布” -> “添加文档” 或 “编辑文档”。
你现在应该能看到一个漂亮的 KindEditor 编辑器了。
尝试插入一张图片，点击编辑器上的“图片”按钮，上传一张本地图片,看看是否能成功上传并显示在文章中。

常见问题与解决方案

问题1：点击“上传图片”没有反应，或者提示“后台处理文件未指定”。
- 原因：uploadJson 的路径错误，或者 /kindeditor/php/upload_json.php 文件不存在/无法访问。
- 解决：仔细检查 article_edit.htm 中 uploadJson 的路径是否正确，确保 /kindeditor/php/ 目录在服务器上存在并且可执行。
问题2：图片上传成功，但在前台文章页显示不出来。
- 原因：
  1. 图片路径问题：KindEditor 上传后保存的是相对路径（如 /uploads/image/2025/10/xx.jpg）,但织梦在调用时可能无法正确解析。
  2. 前台模板标签问题：前台模板中调用文章内容通常用 {dede:field.body/},这个标签本身是没问题的。
  3. 最常见的原因是 图片路径不完整，织梦默认会把这样的路径解析错。
- 解决：
  - 最佳实践：在 KindEditor 的初始化代码中，添加一个 URL 路径配置，强制 KindEditor 使用完整的 URL。
```
K.create('#body', {
// ... 其他配置
basePath : '/kindeditor/', // 添加这一行
uploadJson : '/kindeditor/php/upload_json.php',
// ...
});
```
  - 检查前台模板：确保你的前台文章模板 {dede:field.body/} 前后没有其他干扰输出的代码。
  - 检查图片路径：在后台编辑器里上传图片后，切换到“源代码”模式，看看图片的 src 属性是不是完整的 URL（如 http://你的域名.com/uploads/image/...），如果不是，说明 basePath 配置或 config.php 中的路径有问题。
问题3：上传文件/图片时，提示“没有权限”。
- 原因：/uploads/ 目录或其子目录没有写入权限。
- 解决：重新检查并设置目录权限，确保 Web 服务器用户（如 www-data, nginx, apache）对该目录有写入权限。

通过以上步骤，你应该就能成功地在织梦系统中集成并使用功能强大的 KindEditor 编辑器了。

kindeditor 织梦