Fragmenta CMS富文本编辑器揭秘contenteditable工具栏如何清洗脏HTML【免费下载链接】fragmenta-cmsA user-friendly CMS written in Go (golang)项目地址: https://gitcode.com/gh_mirrors/fr/fragmenta-cmsFragmenta CMS 是一款用 Go 语言编写的开源内容管理系统它的富文本编辑器不依赖任何第三方库仅凭原生contenteditable加一段轻量脚本就实现了所见即所得编辑与 HTML 清洗能力。本文带你揭秘它的 contenteditable 工具栏是如何工作又是如何在输入、点击、提交三个时机层层拦截把从 Word 粘贴进来的脏 HTML 变得干净整洁的 为什么富文本编辑器的 HTML 需要清洗用contenteditable做富文本编辑器最大的坑不是写不出来而是存不干净从 Word / TextEdit 粘贴进来一大坨style内联样式、font color标签微软专属垃圾MsoNormal类名、o:p空段落、HTML 注释浏览器自动生成的空span以及justify命令产生的内联text-alignFragmenta CMS 的答案很朴素不引入重型编辑器库而是把清洗逻辑拆成三道防线覆盖内容进入编辑区的每个关键时机核心实现见src/lib/editable/assets/scripts/editable.js。contenteditable 工具栏的工作原理三件套架构编辑区由三个元素组成藏在一个普通form里用法示例见src/lib/editable/views/example.html.got元素类名/标识作用工具栏.content-editable-toolbar一排按钮点击触发document.execCommand隐藏 textarea.content-textarea真正随表单提交的字段平时隐藏可视化编辑区.content-editable带contenteditable属性用户实际打字的地方默认展示 关键点用户看到的是contenteditable区块但表单提交的始终是 textarea。脚本在表单submit时把编辑区的 HTML 同步进 textarea两个世界各取所需。三档可选的工具栏模板模板文件包含按钮editable-toolbar-basic.html.got段落、加粗、斜体、链接、查看源码editable-toolbar.html.got默认上述 H1~H5 标题、有序/无序列表、左/右/居中、引用editable-toolbar-full.html.got默认全部 代码块pre按钮的id直接就是execCommand命令名Bold、Italic、insertorderedlist、justifyCenter……标题和引用则复用formatblock命令用data-format属性区分h1~h5、p、blockquote。点击查看源码showCode按钮时编辑区切换成深色等宽字体的 HTML 源码视图改完再切回来——这也是为什么编辑器内置了一个暗色代码面板。页面src/pages/views/form.html.got和文章src/posts/views/form.html.got的编辑表单都通过模板指令{{ template lib/editable/views/editable-toolbar.html.got }}一行引入工具栏接入成本极低。三道清洗防线脏 HTML 无处遁形 第一道输入时的实时清理每次编辑区发生input事件立即执行cleanHTMLElements遍历p, div, b, i, h1~h6移除全部style属性不允许内联样式是铁律span额外移除style和langfont标签移除color属性第二道点击工具栏后的定向清理execCommand执行完不是完事脚本会取选区的公共祖先元素getSelectionParentElement()再做两件事cleanAlign把justifyLeft/Center/Right产生的内联text-align样式转写成align-left / align-center / align-right三个 CSS 类配合!important见src/lib/editable/assets/styles/editable.css同时移除残留style属性cleanHTMLElements对选区再次扫一遍样式垃圾第三道提交前的正则深度清洗点击查看源码或表单提交时updateContent会把编辑区 HTML 交给cleanHTML处理一组正则依次出动正则目标清洗效果span空标签整对移除font ...标签全部移除第一道防线漏网的nbsp;还原为普通空格p/p空段落转为换行符保持排版美观!-- --注释、MsoNormal、o:p微软 Office 专属垃圾统统删除连续排列的ul/ol/li/p/h*自动插入换行源码更易读三道防线层层递进输入拦样式 → 点击拦对齐垃圾 → 提交前正则兜底最终存进数据库的 HTML 简短、无内联样式、无厂商私有标记。如何快速接入这套编辑器在自己的页面表单里放齐三件套即可按钮模板 隐藏 textarea content-editable区块脚本启动时自动扫描.content-editable-toolbar完成绑定无需手写初始化代码引入工具栏模板三档任选见src/lib/editable/views/目录放置textarea classcontent-textarea与div contenteditable classcontent-editable加载src/lib/editable/assets/scripts/editable.js与src/lib/editable/assets/styles/editable.css想自己动手试试克隆仓库后阅读src/lib/editable/即可git clone https://gitcode.com/gh_mirrors/fr/fragmenta-cms关键文件速查 文件说明src/lib/editable/assets/scripts/editable.js工具栏激活 三套清洗函数核心逻辑src/lib/editable/views/editable-toolbar.html.got默认工具栏模板src/lib/editable/views/editable-toolbar-basic.html.got精简版工具栏模板src/lib/editable/views/editable-toolbar-full.html.got完整版工具栏模板含代码块src/lib/editable/assets/styles/editable.css工具栏按钮、编辑区与对齐类的样式src/pages/views/form.html.got/src/posts/views/form.html.got编辑器在页面与文章表单中的实际应用总结Fragmenta CMS 的富文本编辑器证明了——contenteditableexecCommand 针对性清洗函数就足以撑起一个干净可靠的 CMS 编辑器。没有庞大依赖只有对脏 HTML的精确打击这正是它值得新手研究的原因。【免费下载链接】fragmenta-cmsA user-friendly CMS written in Go (golang)项目地址: https://gitcode.com/gh_mirrors/fr/fragmenta-cms创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考