织梦CKeditor如何配置使用？-织梦建站-盈思创科技

“织梦ckeditor”通常指的是为织梦CMS的默认编辑器（通常是老版的editor文件夹下的编辑器）替换或升级为功能更强大的CKEditor，这个过程主要有两种方式：

（图片来源网络，侵删）

直接替换法（推荐）：将CKEditor文件直接覆盖织梦默认的编辑器文件夹，最简单直接，适用于大多数用户。
插件集成法：使用现成的织梦CKEditor插件，安装即可，一劳永逸。

下面我将分步介绍这两种方法,并提供一些高级配置和常见问题的解决方案。

直接替换法（以CKEditor 4为例）

这是最常见的方法,操作简单，能快速升级编辑器。

准备工作

下载CKEditor：
- 访问CKEditor官方网站：https://ckeditor.com/ckeditor-4/download/
- 下载 "Full" 版本，因为它包含了所有功能插件。
- 下载后你会得到一个压缩包,ckeditor_4.x.x.zip。
备份网站文件：
（图片来源网络，侵删）
- 这是最重要的一步！ 在进行任何文件替换之前，请务必备份你的整个网站，特别是 /include/ 目录。

操作步骤

解压CKEditor文件：
- 将下载的 ckeditor_4.x.x.zip 解压，你会得到一个名为 ckeditor 的文件夹。
找到织梦默认编辑器目录：
- 登录你的网站FTP或文件管理器。
- 进入织梦的安装根目录,找到 include/ 文件夹。
- 在 include/ 文件夹下，找到名为 editor 的文件夹。这就是我们要替换的目标。
替换文件夹：
- 将你刚刚解压得到的 ckeditor 文件夹内的，覆盖到织梦网站的 /include/editor/ 目录下。
- 注意：是替换 editor 文件夹内部的文件，而不是用 ckeditor 这个文件夹去替换 editor 文件夹。

修改配置文件（可选但推荐）：

为了让织梦能正确调用CKEditor,并且加载必要的样式和按钮，我们需要修改一个配置文件。
在 /include/editor/ 目录下，找到 config.js 文件，用文本编辑器打开它。
在文件末尾,添加以下代码：

// 自定义配置
CKEDITOR.editorConfig = function( config ) {
    // 定义工具栏
    config.toolbar = 'Full';
    // 允许的标签
    config.allowedContent = true; // 如果担心安全，可以设置得更严格一些，但为了方便，先这样设置
    // 语言设置，默认是en，改为zh-cn
    config.language = 'zh-cn';
    // 样式文件路径，这里指向织梦的样式目录
    config.contentsCss = '/static/css/admin.css'; // 可以根据你的模板调整路径
    // 从后台加载自定义样式
    config.stylesSet = 'dedecms_styles';
    // 添加自定义的样式定义
    CKEDITOR.addStylesSet( 'dedecms_styles', [
        // { name: '标题一', element: 'h1', styles: { 'color': 'blue' } },
        // { name: '内容区域', element: 'div', attributes: { 'class': 'article-content' } }
    ]);
};

这段代码设置了工具栏为完整版、语言为中文，并尝试加载织梦后台的样式，让编辑器外观更统一。

清空缓存：
- 登录织梦后台,进入“系统” -> “清除缓存”，然后清除所有缓存。
- 有时浏览器缓存也会导致问题,可以按 Ctrl + F5 强制刷新页面。
测试：
- 进入“核心” -> “内容模型管理” -> “添加内容”，或者修改一篇文章。
- 你应该能看到,原来的老编辑器已经被全新的CKEditor 4所取代了。

插件集成法（推荐给不想动手的用户）

如果你不想手动替换文件,可以直接在网上搜索“织梦CKEditor插件”，有很多现成的。

操作步骤

搜索并下载插件：
- 在织梦论坛、DedeCMS官网或其他资源网站搜索“织梦CKEditor编辑器插件”。
- 下载一个评价好、更新日期较近的插件包。
安装插件：
- 通常插件包里会有一个 install.php 文件或详细的安装说明。
- 按照说明,将插件文件上传到网站指定目录（通常是 /include/ 或 /dede/）。
- 在浏览器中访问 你的网站/install.php，根据提示完成安装，安装过程一般会自动完成文件替换和数据库配置。
测试：

安装完成后,清空缓存，然后进入文章编辑页面进行测试。

优点：安装简单，通常带有预设好的优化配置。缺点：可能捆绑了其他代码，或者版本不是最新的，需要选择可信赖的来源。

CKEditor 高级配置与技巧

如果你使用了方法一,并且想对CKEditor进行更精细的定制，可以继续编辑 /include/editor/config.js 文件。

自定义工具栏

config.toolbar 决定了工具栏的显示，你可以从 'Full', 'Basic' 等预设中选择，也可以自定义。

// 自定义工具栏
config.toolbar = 'MyToolbar';
// 定义工具栏
config.toolbar_MyToolbar = [
    { name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'] },
    { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
    { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'Scayt'] },
    { name: 'forms', items: ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'] },
    '/',
    { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
    { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
    { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
    { name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'] },
    { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
    { name: 'colors', items: ['TextColor', 'BGColor'] },
    { name: 'tools', items: ['Maximize', 'ShowBlocks'] }
];

上传图片和文件

这是织梦用户最关心的问题,默认情况下，CKEditor的上传功能是独立的，需要配置才能和织梦的上传接口结合。

简单方法：使用CKEditor自带的图片上传按钮，它会弹出一个简单的上传窗口，你可以在里面选择图片并上传，但路径可能需要手动调整。
推荐方法：集成织梦的上传接口，这需要修改JS代码，比较复杂，一个折中的好方法是使用CKEditor的插件，如 ckfinder，但需要额外配置。

对于大多数用户,直接使用CKEditor自带的图片上传功能，然后在插入图片后，手动将图片地址修改为织梦的 [field:litpic/] 或其他你需要的标签，是一种可行的办法。

禁用不需要的功能

为了简化界面或提高安全性,你可以禁用某些按钮。

// 禁用“源码”按钮
config.removeButtons = 'Source';
// 禁用多个按钮
config.removeButtons = 'Cut,Redo,Anchor';

设置默认字体和字号

// 设置默认字体
config.font_defaultLabel = '宋体';
config.font_names = '宋体/宋体;黑体/黑体;微软雅黑/微软雅黑;Arial/Arial;Comic Sans MS/Comic Sans MS;Courier New/Courier New;Georgia/Georgia;Lucida Sans/Lucida Sans;Tahoma/Tahoma;Times New Roman/Times New Roman;Verdana/Verdana';
// 设置默认字号
config.fontSize_defaultLabel = '16px';
config.fontSize_sizes = '8px/8px;12px/12px;16px/16px;18px/18px;24px/24px;36px/36px;48px/48px';

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

Q: 替换后编辑器显示一片空白或加载不出来。
- A: 检查 /include/editor/ 目录下的文件是否上传完整，特别是 ckeditor.js 等核心文件，检查 config.js 语法是否有错误（比如少了个分号或大括号），浏览器控制台（按F12）会提示具体的JS错误。
Q: 图片上传不了，或者上传后路径不正确。
- A: 这是最常见的问题，CKEditor有自己的上传逻辑，和织梦默认的../uploads/allimg/路径不同，你可以尝试在CKEditor的图片弹窗中，切换到“上传”选项卡进行上传，或者手动修改图片地址，要完美解决，需要修改CKEditor的配置文件，使其调用织梦的上传接口，这需要一定的JS功底。
Q: 编辑器样式和织梦后台其他地方不一致。
- A: 在 config.js 中设置 config.contentsCss = '/static/css/admin.css'; 来加载织梦的后台样式，可以让编辑器内的字体、颜色等与后台保持一致。
Q: 如何在编辑器中插入织梦的特殊标签，如 [field:title]？
- A: CKEditor默认不认识这些标签，你可以通过自定义插件或修改模板文件来实现，一个简单的方法是在发布文章时，切换到“源码”模式（Source），手动粘贴这些标签，或者，你可以开发一个自定义按钮，点击后插入预设的标签代码。

对于大多数织梦用户来说,方法一（直接替换法） 是最实用、最直接的升级方案，虽然配置图片上传等高级功能可能需要一些额外工作，但基本的编辑器功能替换已经足够满足日常需求。

操作前备份是铁律，可以让你在出现问题时快速恢复，希望这份详细的指南能帮助你成功为你的织梦CMS升级到CKEditor！

织梦CKeditor如何配置使用？

直接替换法（以CKEditor 4为例）

准备工作

操作步骤

插件集成法（推荐给不想动手的用户）

操作步骤

CKEditor 高级配置与技巧

自定义工具栏

上传图片和文件

禁用不需要的功能

设置默认字体和字号

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

相关文章

目录[+]