dede 81 html编辑器

什么是 DEDE 81 编辑器？

DEDE 81 编辑器 是 DedeCMS 系统自带的一个基于 JavaScript 的 WYSIWYG (所见即所得) HTML 编辑器，它的名字来源于其核心文件 editor\kindeditor\kindeditor.js 中的一个版本号标识，KindEditor 4.1.8，而 DedeCMS 的开发者们习惯性地称其为 "81 编辑器"。

• 核心来源: 它实际上是对 KindEditor 这个开源编辑器进行了一定程度修改和封装后的版本。
• 主要用途: 在 DedeCMS 的后台内容发布页面（如文章、软件、图集等）中，用于让管理员可以像使用 Word 一样编辑文章内容，支持插入图片、超链接、表格、视频等多媒体元素，并自动生成 HTML 代码。

如何找到和识别它？

在你的 DedeCMS 后台，当你进入“核心” -> “内容发布” -> “添加文章”页面时，看到那个带有工具栏的文本框区域，就是它了。

在服务器文件中,它的主要文件位于： /dede/templets/目录下的 article_add.htm, article_edit.htm 等文件中。

你可以在这些文件里找到类似这样的代码：

{dede:editor name='body' id='body' style='width:98%;height:400px' }
    <!-- 加载编辑器JS和CSS的代码 -->
{/dede:editor}

主要功能和特点 (优点)

在当时,81编辑器是一个相当不错的编辑器，具备以下功能：

• 所见即所得: 编辑界面直观，操作简单。
• 格式化工具: 支持加粗、斜体、下划线、字体、字号、颜色、对齐方式等基本文本格式。
• 列表功能: 支持有序列表和无序列表。
• 插入功能:
  • 图片: 可以上传本地图片，也可以从媒体库中选择，这是最常用的功能之一。
  • 超链接: 可以插入和编辑网页链接。
  • 表格: 可以插入和编辑表格。
  • Flash/SWF: 可以插入 Flash 动画。
  • 视频: 支持插入视频文件。
  • 表情: 内置常用表情。
• 源码编辑: 提供一个“源码”按钮，可以切换到 HTML 源码视图进行直接编辑。
• 媒体库集成: 与 DedeCMS 的媒体库（/dede/media_add.php）无缝集成，方便管理已上传的图片等资源。

问题和局限性 (缺点)

随着技术的发展,81编辑器的缺点也日益凸显，这也是为什么在新版本的 DedeCMS 和其他现代 CMS 中它被逐渐淘汰的原因。

• 安全性问题 (最严重):

  • XSS (跨站脚本) 漏洞: 这是它最致命的弱点，旧版本的编辑器在过滤用户输入的 HTML 代码时不够严格，攻击者可以提交包含恶意 JavaScript 代码的内容，当其他用户访问包含这些恶意代码的页面时，脚本就会在用户浏览器中执行，可能导致 Cookie 窃取、会话劫持等严重安全问题。
  • 文件上传漏洞: 编辑器的上传功能可能被利用来上传木马文件或 Webshell，从而控制整个服务器。

• 兼容性问题:

  • 它基于较老的 JavaScript 技术，在现代浏览器（如 Chrome, Firefox, Edge 的新版本）中可能出现样式错乱、功能失效或报错的情况。
  • 对 HTML5 和 CSS3 的支持非常有限。

• 用户体验差:

  
  （图片来源网络，侵删）
  • 上传图片后,默认生成的代码往往包含 <img> 标签的 width 和 height 属性，这会导致图片失真，现代做法是只保留 src 属性，并通过 CSS 控制大小。
  • 代码冗余：编辑器生成的 HTML 代码通常包含大量不必要的样式标签和空标签，导致页面臃肿。
  • 在移动端或响应式设计中,这个编辑器完全无法使用。

• 功能陈旧:

  缺乏现代编辑器的基本功能,如代码高亮、拖拽上传、撤销/重做历史记录、实时预览等。

如何管理和配置 81 编辑器？

虽然不推荐,但如果你需要维护一个使用它的老网站，以下是一些配置点：

1 更换编辑器 (推荐)

最彻底的解决方案是更换编辑器,DedeCMS V5.7 SP2 版本之后，官方开始默认集成更现代的 百度的 UEditor 编辑器，如果你的版本较旧，可以手动升级到支持 UEditor 的版本，或者通过第三方插件集成其他编辑器（如 TinyMCE, CKEditor）。

2 调整编辑器参数

如果你必须使用 81 编辑器，可以通过修改其配置文件来调整一些基本行为。

配置文件通常位于：/dede/editor/kindeditor/config.js

你可以在这个文件中修改以下常用参数：

// 示例：config.js 中的部分可配置项
KindEditor.options = {
    // 编辑器宽度，可以是像素值或百分比
    width: '700px', 
    // 编辑器高度
    height: '300px',
    // 是否允许上传图片
    allowImageUpload : true,
    // 是否允许上传文件
    allowFileUpload : true,
    // 默认的字体
    defaultFontFamily : ['宋体', '微软雅黑', '新宋体', '黑体', '楷体', 'Arial'],
    // 默认的字号
    defaultFontSize : ['10px', '12px', '14px', '16px', '18px', '24px', '32px'],
    // 工具栏按钮，可以自定义显示哪些按钮
    items : [
        'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull',
        'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
        'formatblock', 'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold',
        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
        'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
        'anchor', 'link', 'unlink'
    ],
    // 上传文件保存路径，相对于网站根目录
    // 这个路径需要确保有写入权限
    uploadJson : '/dede/editor/kindeditor/php/upload_json.php',
    // 文件管理器路径
    fileManagerJson : '/dede/editor/kindeditor/php/file_manager_json.php',
    // 允许上传的图片文件类型
    allowImageExt : "jpg,jpeg,gif,bmp,png",
    // 允许上传的文件类型
    allowFileExt : "doc,docx,xls,xlsx,ppt,pptx,pdf,txt,rar,zip,7z",
    // 允许上传的文件大小，单位 KB
    allowFileMaxSize : "10240"
};

重要提示: 修改配置后，为了安全起见，请务必：

1. 重命名或删除 上传目录 /dede/editor/kindeditor/php/ 中的 upload_json.php 和 file_manager_json.php 文件，除非你确实需要用到这些功能，并且已经对它们做了足够的安全加固。
2. 检查网站目录权限,确保 uploads/ 等上传目录的权限设置正确，禁止执行脚本。

如果你正在开发一个新的 DedeCMS 网站，请务必选择一个现代的、安全的编辑器，如果你只是在维护一个老网站，请务必意识到 81 编辑器的安全风险，并采取相应的防护措施。