点击“样式环绕”按钮会影响同一文本框内其他组件的内部组件
RTE在编辑时依赖于DOM内容，所以如果你故意用类似的程序删除它 “''js onRender（） { this.el.innerHTML = this.model.get（“displayedText”） }, ``` 编辑完成后，内部组件将被移除。
阅读下方完整回答 ↓问题
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ Chrome 104.0.5112.101可复制演示链接 https://jsfiddle.net/7cLr0xt2/3/描述一下那个虫子 如何复现这个漏洞？ 不知为何，我无法在上面链接的小提琴里重现这个bug，因为第34行“selectedComponent.components（'<span liquid=”if contact.id“>jhbjhhgjj</span> <span liquid=”else“>qwewqeqwe</span>'）''并不能替换组件的内部组件，所以我只能分享一个项目中发生的情况视频，步骤如下：双击“Hello World”!!文本框中选择“世界”一词在RTE编辑器中点击画笔按钮，将该词包裹进行样式化点击组件工具栏最左侧圈出的“if”按钮，点击弹出的对话框中的“确定”，将该组件转换为“条件文本”组件双击新创建的“打开条件句选择”组件（通常会弹出对话框，但为了解决这个bug我简化了，现在它只是给组件应用一些虚拟信息，包括添加属性和更改组件的内部组件）。不过更换内部部件在这把小提琴里不起作用，不知道为什么）点击“查看代码”按钮查看代码对代码的更改——如你所见，它插入了属性 'liquidtag=“if”，但内部组件未显示。在我的项目中，这个跨度的内部分量是“<span li...
回答（4）
RTE在编辑时依赖于DOM内容，所以如果你故意用类似的程序删除它 “''js onRender（） { this.el.innerHTML = this.model.get（“displayedText”） },
编辑完成后，内部组件将被移除。
好的，谢谢@artf，这说得通。 然而，那些代码行，以及 必须在画布内渲染正确的选中状态（包括组件最初渲染时以及用户选择不同的“if”状态，从而改变“displayedText”）： https://user-images.githubusercontent.com/67364267/189854125-9544d34b-2f71-4b0c-872e-dbdfb2232fd9.mov 你能想到用RTE编辑后保留内部组件的方法吗？也许我可以把这些内部组件存储在“条件文本”组件本身的属性里，并在“onRender（）”时分配它们？如果可以，我该如何在“onRender（）”钩子里设置组件的“co...
我还需要做更多测试，但看起来我通过在创建/编辑组件时保存内部组件，然后使用'rte：disable' 钩子，如下，解决了这个问题： 这看起来有点老套，如果你能想到更好的方法，请告诉我。
谢谢你举报，@benryanwilliams。 关于点击“样式包裹”按钮会影响同一文本框内其他组件的内部组件，这个问题问得很好。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'））; 组件生命周期 editor.on（'compone...
相关问答
通过相似的问题讨论继续研究。
问题 #5086
Style：property：update 和 Property onChange 都被过度触发
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 版本 112.0.5615.137（官方版本） 可复制演示链接 https://jsfiddle.net/SagarMaria/sunygp2f/3/ 描述一下那个虫子 如何复现这个...
问题 #5990
当你删除组件时，组件间的重复类也会被删除。
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 126.0.6478.127（Windows） 可复制演示链接 https://jsfiddle.net/t06s4oLb/8/ 描述一下那个虫子 如何复现这个漏洞？将第1节添加到画...
问题 #6706
TypeError：e.getRoot 不是函数（样式管理器中的竞态条件）
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 所有浏览器（Chrome、Safari、Firefox、Edge） 可复制演示链接 https://jsfiddle.net/saeedhbi/powxyjdq/3/ 描述一下那个虫子 如...
问题 #4497
从 v18.4 更新到 GrapesJS v19.5 会导致 Chrome 变得无响应
葡萄JS版本[x] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ Chrome 104.0.5112.79可复制演示链接 https://jsfiddle.net/gvrnw2c3/4/描述一下那个虫子 如何复现这个漏洞？ 我目前无法用 jsfiddle 重现这个...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选，助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
教程
GrapesJS DevTools: A Developer Panel Inside Your Editor
If you've ever debugged GrapesJS with console.log(editor.getSelected()) and a dozen throwaway event listeners — this post is for you.
教程
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
教程
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins — TinyMCE Inline Text Editor and Placeholder.
浏览插件分类
直接跳转到市场上的插件分类页面。