当标签名称更改时，在Canvas上重新渲染组件

Question

我正在尝试构建一个基础的Header组件，允许你用一个特质选择H1到H6。但当选择某个选项时，画布不会更新。在代码视图中可以看到这个变化，如果我用拖曳工具移动画布中的元素，标签也会随之改变。我一直在阅读API文档和源代码，但我无法让组件自动重新渲染。我怀疑Grapes并没有监听组件标签名称的变化。在这种情况下，强制重渲染的合适方法是什么？ “''js var comps = 编辑器。主导组件; VAR 块 = 编辑器。BlockManager; var textType = comps.getType（'text'）; var textModel = textType.model; var textView = textType.view; comps.addType（'header'， { model： textModel.extend（{ defaults： Object.assign（{}， textModel.prototype.defaults， { 'custom-name'： 'Header'， 标签名称：'h1'， 特质：[ { 类型：“选择”， 选项：[ {值：“h...

artf · Accepted Answer

@z1lk我已经在下一个版本加了这个功能 “''js 模型 在 init 内部 this.listenTo（this， 'change：tagName'， this.tagUpdated）; // ... tagUpdated（） { const coll = this.collection; cont at = coll.indexOf（this）; coll.remove（this）; coll.add（this， { at }）; }, ```

z1lk · Answer

我不确定为什么“el”会是字符串，但请看关闭该问题的提交：https://github.com/artf/grapesjs/commit/e450cb98855d16ad819f1214350825a50e45e910 如果你用的是最新的 Grapes 版本，组件会监听 'tagName' 的更改，并自己做节点替换。所以你应该可以移除你的“init”和“tagUpdated”函数。该特征会更新“tagName”，组件负责其余部分。 编辑： 我还想到：有时传递给 'isComponent' 的对象没有我调用的方法，这种情况下会出错。你可以先做安全检查： “''js if（el && el.tagName && ['H1'， 'H2'， 'H3'， 'H4'， 'H5'， 'H6'].includes（el.tagName）） { ... ```

artf · Answer

是的，这是因为你不能更改现有DOM元素的标签名。可能的解决办法是在更改“tagName”时，移除并替换该节点（保持在同一位置）

当标签名称更改时，在Canvas上重新渲染组件

问题

回答（3）

相关问答

：Handlebars 渲染模板中的可编辑组件

点击文本元素，打开不同面板视图

创建自定义组件的最低要求

自定义组件不可编辑，而且特性更新后画布也不会更新

与此问题匹配的付费插件

相关教程

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

浏览插件分类