KindEditor与Dede配置文件如何关联配置？-DEDE建站-盈思创科技

KindEditor 是一个功能强大的开源 HTML 编辑器，在旧版的 Dedecms 中被广泛使用，配置它主要涉及两个核心部分：

（图片来源网络，侵删）

调用配置文件：在需要编辑器的页面（如文章发布、内容修改页）引入 KindEditor 的 JS 文件，并指定一个配置文件。
编辑器配置文件：这个文件是核心，它定义了编辑器的工具栏、上传路径、图片管理等所有功能。

第一步：定位核心文件

在 Dedecms 的目录结构中，KindEditor 的核心文件通常位于：

/include/ckeditor/ (注意：虽然目录名是 ckeditor，但里面存放的确实是 KindEditor 的文件，这是 Dedecms 的一个历史命名习惯)

或者,如果你使用的是更纯净的 KindEditor 包，它可能在 /include/kindeditor/。

我们将以最常见的 /include/ckeditor/ 路径为例。

（图片来源网络，侵删）

在这个目录下,你会看到以下关键文件：

kindeditor.js 或 kindeditor-min.js：编辑器的核心 JS 文件。
kindeditor.config.js：这是最重要的配置文件，我们所有的修改都在这里进行。
plugins/：存放各种插件（如图片、表格、链接等）的目录。
themes/：存放编辑器主题样式的目录。

第二步：编辑器配置文件详解 (`kindeditor.config.js`)

这个文件是 KindEditor 的“大脑”，打开它，你会看到很多 KE 对象的配置项，下面我们来逐一讲解最常用和最重要的配置。

基本路径配置

在文件开头,通常会定义 KindEditor 的路径，确保 JS 和 CSS 文件能被正确加载。

// 在 kindeditor.config.js 文件顶部
var editorThemePath = '/include/ckeditor/themes/default/';
var editorPluginsPath = '/include/ckeditor/plugins/';

工具栏配置

这是最直观的配置,决定了编辑器顶部有哪些功能按钮。

（图片来源网络，侵删）

// 在 kindeditor.config.js 中搜索 "items"
items : [
    'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
    'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull',
    'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', '|',
    'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
    'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
    'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
    'anchor', 'link', 'unlink', '|', 'about'
]

表示分隔符。
'source'：显示/隐藏源代码。
'image', 'flash', 'media'：分别插入图片、Flash、视频。
'table'：插入表格。
'link', 'unlink'：插入/取消超链接。

你可以根据需要增删或调整顺序,如果你不需要插入 Flash，就可以从 items 数组中移除 'flash'。

上传路径配置 (最关键！)

这是配置中最容易出错,也最重要的部分，你需要告诉 KindEditor 用户上传的图片、文件等应该存放在服务器的哪个目录，以及对应的 URL 是什么。

// 图片上传配置
imageUploadJson : '/include/ckeditor/php/upload_json.php', // 处理图片上传的服务器端脚本
imageManagerJson : '/include/ckeditor/php/file_manager_json.php', // 图片管理器脚本
imgPath : '/uploads/allimg/', // *(重要)* 图片上传后，在编辑器中显示的相对路径

参数解释：

imageUploadJson：指向一个 PHP 脚本，该脚本负责接收上传的图片文件并保存到服务器。路径必须是服务器上真实存在的 PHP 文件。
imageManagerJson：指向一个 PHP 脚本，用于在编辑器中打开“图片空间”或“图片管理器”时，列出已上传的图片。
imgPath：这个参数定义了图片上传后，在文章内容中保存的路径是相对于网站根目录的，如果 imgPath 是 /uploads/allimg/，你上传了一张名为 abc.jpg 的图片，那么在文章内容中保存的路径就是 /uploads/allimg/abc.jpg。

文件上传路径配置：

// 文件上传配置
fileManagerJson : '/include/ckeditor/php/file_manager_json.php', // 文件管理器脚本
fileUploadJson : '/include/ckeditor/php/upload_json.php', // 处理文件上传的服务器端脚本
fileFieldDesc : '支持格式：rar,zip,doc,docx,xls,xlsx,ppt,pptx,pdf,txt,mp3,wma,wmv,avi,mpg,exe,psd', // 允许上传的文件类型描述
fileFieldExt : 'rar,zip,doc,docx,xls,xlsx,ppt,pptx,pdf,txt,mp3,wma,wmv,avi,mpg,exe,psd', // *(重要)* 允许上传的文件后缀名
filePath : '/uploads/file/', // *(重要)* 文件上传后，在编辑器中显示的相对路径

filePath：和 imgPath 类似，定义了上传文件的保存路径。

安全提示：为了安全，upload_json.php 文件通常会有一个 $ext_arr 变量来限制允许上传的文件类型，请确保这里的配置和 fileFieldExt 保持一致，不要允许上传 .php, .asp 等可执行脚本文件。

其他常用配置

// 编辑器宽度高度
width : '100%', // 可以是 '100%' 或具体像素值 '800px'
height : '400px',
// 设置初始内容
// initialContent : '请输入内容...',
// 是否显示详细参数
// wellFormatMode : true,
// 指定允许的 CSS 样式
cssPath : '', // 可以指向一个外部的 CSS 文件，让编辑器内容遵循网站样式
// 按钮图标样式
// cssData : '.ke-btn-primary {background-color: #4472C4; color: white;}'

第三步：在 Dedecms 页面中调用编辑器

配置好了 kindeditor.config.js，接下来就是在需要的地方使用它了，以 Dedecms 的文章发布页面 article_add.php 为例。

在页面头部引入 JS 文件：在 <head> 标签内或页面底部引入 KindEditor 的核心 JS 文件和配置文件。

<script charset="utf-8" src="/include/ckeditor/kindeditor.js"></script>
<script charset="utf-8" src="/include/ckeditor/lang/zh_CN.js"></script>
<script charset="utf-8" src="/include/ckeditor/kindeditor.config.js"></script>

初始化编辑器：在页面底部的 <script> 标签内，编写初始化代码，这段代码会找到指定的 textarea，并将其替换为 KindEditor。
```
<textarea name="body" id="body" style="width:100%; height:400px; visibility:hidden;"></textarea>
<script>
// 创建编辑器实例
var editor;
KindEditor.ready(function(K) {
    editor = K.create('#body', {
        // 在这里可以覆盖 kindeditor.config.js 中的配置
        // 只为这个页面设置特定的高度
        // height: '500px'
    });
});
</script>
```
- name="body"：这个 name 属性必须和 Dedecms 后台处理文章提交的 PHP 文件中获取内容的变量名一致，通常是 $_POST['body']。
- id="body"：id 是 KindEditor 初始化时用来定位 textarea 的选择器，K.create('#body') 中的 #body 就对应这个 id。

常见问题与解决方案

上传图片失败，提示“请求上传接口错误”
- 原因：通常是 upload_json.php 文件的路径错误，或者该文件没有执行权限。
- 解决：
  1. 检查 kindeditor.config.js 中的 imageUploadJson 和 fileUploadJson 路径是否正确。
  2. 确保服务器已安装 PHP 环境，php.ini 中的文件上传功能是开启的 (file_uploads = On)。
  3. 检查上传目录（如 /uploads/allimg/）是否有写入权限（权限值通常为 755 或 777，但 777 有安全风险，不推荐）。
编辑器加载不出来，或者是一片空白
- 原因：JS 文件路径错误，或者 JS 文件本身损坏。
- 解决：检查浏览器控制台（按 F12）是否有 JS 报错，根据错误提示，检查引入的 JS 文件路径是否正确。
上传的图片在编辑器中显示正常，但前台页面却显示不出来
- 原因：这是 imgPath 和 filePath 配置最常见的问题，编辑器中保存的路径是 /uploads/allimg/abc.jpg，但网站根目录下并没有这个目录，或者目录名不匹配。
- 解决：
  1. 登录你的 FTP 或服务器，检查网站根目录下是否存在你在 imgPath 和 filePath 中配置的文件夹（如 /uploads/allimg/ 和 /uploads/file/）。
  2. 确保文件夹名称拼写完全正确。
  3. 确保这些文件夹的权限允许写入。

配置 Dedecms 中的 KindEditor，核心就是 kindeditor.config.js 这个文件，你需要重点关注：

items：定义工具栏功能。
imageUploadJson / fileUploadJson：指向正确的上传处理脚本。
imgPath / filePath：配置正确的上传文件在服务器和 URL 中的存放路径。

只要这几项配置无误,KindEditor 就能在 Dedecms 中正常工作了。

KindEditor与Dede配置文件如何关联配置？

第一步：定位核心文件

第二步：编辑器配置文件详解 (`kindeditor.config.js`)

基本路径配置

工具栏配置

上传路径配置 (最关键！)

其他常用配置

第三步：在 Dedecms 页面中调用编辑器

常见问题与解决方案

相关文章

目录[+]

第一步：定位核心文件

第二步：编辑器配置文件详解 (kindeditor.config.js)

基本路径配置

工具栏配置

上传路径配置 (最关键！)

其他常用配置

第三步：在 Dedecms 页面中调用编辑器

常见问题与解决方案

相关文章

目录[+]

第二步：编辑器配置文件详解 (`kindeditor.config.js`)