使用 RTE 编辑后创建多个子元素

Question

大家好， 我遇到的都是与RTE相关的问题RTE作为对文本块执行的动作创建多个子节点。例如：假设我们在同一文本块上连续执行了三次相同的动作（加粗），那么它在同一元素上创建了三个子节点。RTE中的字体操作仅支持1到7之间的字体大小，因此请在RTE中支持1到100之间的字体大小。 ![图片]（https://user-images.githubusercontent.com/44024159/46786571-e652d280-cd52-11e8-8e44-ec623f5391e2.png） NP：- 我用的是最新版本的库，但问题依然存在，欢迎大家评测。 之前的bug供参考 https://github.com/artf/grapesjs/issues/1495#issue-368617259 请优先回复。提前感谢!!

mudit-mittal · Accepted Answer

大家好， 请查找重现此情景的步骤 1）初始状态 ![图片]（https://user-images.githubusercontent.com/44024159/46848964-71db6a80-ce0a-11e8-9c87-013099c64bf2.png） 2）先执行加粗动作，再执行斜体动作，再下划线动作 ![图片]（https://user-images.githubusercontent.com/44024159/46848910-2759ee00-ce0a-11e8-94ff-03cb51fe8082.png） 3）再次点击粗体动作，再点斜体动作，再下划线动作 ![图片]（https://user-images.githubusercontent.com/44024159/46848931-4bb5ca80-ce0a-11e8-8e69-7e8d8e2c2353.png） 实际情况：- 多获得三<span>元素

mudit-mittal · Answer

大家好， rte.add（'fontSize'， {图标：“'，// 将“结果”绑定在“change”听众身上事件：“变化”，结果：（rte， action） = > rte.exec（'fontSize'， action.btn.firstChild.value），// 任何输入变化（鼠标按键、按键下等）回调更新：（RTE，动作）=> {const value = rte.doc.queryCommandValue（action.name）;如果（value ！= 'false'） { // value 是字符串action.btn.firstChild.value = value;}}}) 该代码块仅支持字体大小1到7之间的值，尽管应为通用且支持所有整数值

artf · Answer

这就是 [execCommand]（https://developer.mozilla.org/it/docs/Web/API/Document/execCommand） 的工作原理，内置的 RTE 就是基于它。如果你需要更高级的，可以尝试 [grapesjs-plugin-ckeditor]（https://github.com/artf/grapesjs-plugin-ckeditor）或者按照本指南实现其他第三方编辑器：https://grapesjs.com/docs/guides/Replace-Rich-Text-Editor.html

使用 RTE 编辑后创建多个子元素

问题

回答（3）

相关问答

在媒体查询下编写的重复CSS

当允许脚本时，葡萄将变为空

： overflow：hidden 在 .gjs-block-label 上剪辑文本

自定义富文本编辑器无法工作

与此问题匹配的付费插件

相关教程

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

浏览插件分类