织梦如何整合kindeditor？-织梦建站-盈思创科技

整合思路

编辑器是通过调用后台模板目录下的 article_edit.htm 文件来渲染的，我们只需要修改这个文件，将原来默认的编辑器替换为 KindEditor 即可。

（图片来源网络，侵删）

第一步：下载并准备 KindEditor

下载 KindEditor
- 访问 KindEditor 官方网站：http://kindeditor.net/
- 下载最新版本的 "标准版"。
- 下载后解压，你会得到一个类似 kindeditor-4.x.x 的文件夹。
整理 KindEditor 文件
- 我们只需要解压后文件夹中的 kindeditor.js、lang（语言文件夹）、themes（主题文件夹）和 plugins（插件文件夹）。
- 为了方便管理，我们在织梦的 /include/ 目录下创建一个名为 editors 的新文件夹。
- 将上面提到的四个核心部分（kindeditor.js、lang、themes、plugins）复制到 /include/editors/ 目录下。
- 你的目录结构应该看起来像这样：
```
/dedecms/
└── /include/
    └── /editors/
        ├── kindeditor.js
        ├── /lang/
        │   ├── zh-CN.js
        │   └── ...
        ├── /themes/
        │   └── default/
        │       └── ...
        └── /plugins/
            └── ...
```

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

这是最关键的一步,我们需要找到并修改织梦后台的内容编辑器模板。

找到模板文件
（图片来源网络，侵删）
- 织梦后台的模板文件通常位于 /dede/templets/ 目录下。
- 我们需要修改的是 article_edit.htm 文件,这个文件是用于添加和编辑文章的。
备份原文件
- 在进行任何修改之前，请务必备份原始的 article_edit.htm 文件！以防修改出错可以恢复。
编辑 article_edit.htm
- 用代码编辑器（如 VS Code, Sublime Text, Notepad++ 等）打开 /dede/templets/article_edit.htm 文件。

替换编辑器代码

在文件中搜索 function showEditor() 函数,这个函数负责加载编辑器。
将整个 showEditor() 函数替换为下面的 KindEditor 版本代码。

// 将原有的 showEditor 函数替换为以下代码
function showEditor(strname, channelid, height, isadmin) {
    // 判断是否是管理员，如果不是，则使用更精简的配置
    var editercfg = '';
    if (isadmin != 1) {
        editercfg = 'allowImageUpload:false,allowFlashUpload:false,allowMediaUpload:false,allowFileUpload:false,';
    }
    // 加载 KindEditor
    KindEditor.ready(function(K) {
        var editor = K.create('textarea[name="' + strname + '"]', {
            cssPath: '/include/editors/themes/default/default.css',
            uploadJson: '/include/editors/php/upload_json.php',
            fileManagerJson: '/include/editors/php/file_manager_json.php',
            allowFileManager: true,
            // 根据是否是管理员设置不同的工具栏
            items: isadmin == 1 ? 
            ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
            'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist',
            'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', '|', 'selectall', '-',
            'title', 'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold', 'italic', 'underline',
            'strikethrough', 'removeformat', '|', 'image', 'multiimage', 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'lineheight', 'link', 'unlink', '|', 'fullscreen'] :
            ['source', '|', 'undo', 'redo', '|', 'preview', '|', 'cut', 'copy', 'paste',
            'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist',
            'insertunorderedlist', 'indent', 'outdent', '|', 'selectall', '-',
            'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold', 'italic', 'underline',
            'strikethrough', 'removeformat', '|', 'image', 'multiimage', 'link', '|', 'fullscreen'],
            // 其他配置
            resizeType: 1,
            minHeight: height,
            minWidth: '700px',
            minWidth: '700px',
            newlineTag: 'p',
            pasteType: 2,
            basePath: '/include/editors/',
            // 将 editercfg 变量插入到配置中
            extraParams: editercfg
        });
        // 将 KindEditor 实例保存到全局变量，以便其他函数调用
        window.KindEditor = editor;
    });
}

第三步：配置 KindEditor 上传功能

为了让 KindEditor 能够上传图片、文件等，我们需要修改它的上传配置,使其指向织梦的上传接口。

找到上传配置文件
- KindEditor 的上传功能由 PHP 文件控制，我们之前已经复制了这些文件到 /include/editors/php/ 目录下。
- 打开 /include/editors/php/upload_json.php 文件。
修改上传路径
- 在 upload_json.php 文件中，找到 $savePath 变量,将其修改为织梦的上传目录。
- 织梦默认的上传目录是 /uploads/,我们需要确保这个目录存在且有写入权限。
- 修改代码如下：
```
// 找到类似这样的行
// $savePath = dirname(__FILE__) . '/../attached/';
// 修改为
$savePath = dirname(__FILE__) . '/../../../uploads/';
```
修改文件管理配置
- 同样地，打开 /include/editors/php/file_manager_json.php 文件。
- 找到 $rootPath 变量,也将其修改为织梦的上传目录。
```
// 找到类似这样的行
// $rootPath = dirname(__FILE__) . '/../attached/';
// 修改为
$rootPath = dirname(__FILE__) . '/../../../uploads/';
```
设置目录权限
- 确保你的 /uploads/ 目录及其子目录（如 uploads/allimg/）具有 755 或 777 的权限，以确保 PHP 可以向其中写入文件，你可以通过 FTP 客户端或服务器命令来修改权限。

第四步：清除缓存并测试

清除织梦缓存
- 登录织梦后台。
- 进入【系统】->【SQL命令行工具】。
- 在命令行中输入 DEL /dede/cache/* (如果你的缓存目录在 /dede/cache/)，然后执行，这会清除所有缓存文件,确保新的模板文件被加载。
测试效果
- 进入【核心】->【内容模型管理】->【普通文章】->【增加内容】。
- 编辑框中，你应该能看到已经成功加载了 KindEditor 编辑器,而不是原来那个简陋的文本框。
- 尝试点击“上传图片”按钮，选择一张本地图片上传，上传成功后，图片应该会插入到内容中，并且图片文件会保存在 /uploads/ 目录下。
- 如果你是管理员，你应该能看到完整的工具栏；如果是普通投稿者,则看到的是精简版工具栏。

常见问题与解决方法

问题1：KindEditor 加载不出来，或者样式错乱。
- 原因：cssPath 路径错误。
- 解决：检查 article_edit.htm 中 cssPath 的路径是否正确，应该是 /include/editors/themes/default/default.css。
问题2：点击上传图片没有反应，或者提示“后台配置文件中，未设置上传目录”。
- 原因：upload_json.php 中的 $savePath 路径错误，或者 /uploads/ 目录没有写入权限。
- 解决：再次检查并确认 $savePath 的路径，然后通过 FTP 检查并设置 /uploads/ 目录的权限为 755 或 777。
问题3：上传成功后，图片无法显示。
- 原因：织梦的图片标签解析问题,或者图片路径不正确。
- 解决：检查 KindEditor 上传后返回的图片路径是否完整，有时候需要修改 KindEditor 的 imageUrlPrefix 配置，确保它返回的是完整的 URL（http://www.yourdomain.com/uploads/...）。
问题4：编辑器工具栏按钮丢失。
- 原因：items 配置数组中的按钮名称有误,或者对应的插件文件丢失。
- 解决：检查 items 数组，确保按钮名称与 KindEditor 官方文档一致，检查 /include/editors/plugins/ 目录下是否有对应的插件文件夹。

通过以上步骤，你应该就能成功地将功能强大的 KindEditor 整合到你的织梦CMS后台中了。

织梦如何整合kindeditor？