GrapesJS 问题

z-vr

哦，我找到了怎么做的——通过 'editor.addComponents（{ 类型： 'MyComponent' }）'。有没有办法通过 CSS 选择器把它插入到特定元素中？ 找到了这段片段，但我该如何找到正确的索引？ “''js editor.getComponents（）.add（'<div>Text</div>'， {at： index}）; ```

z-vr

好的，我做的是 “''js export default function iterateChildren（components， fn） { components.each（（model） => { fn（模型）; const childComps = model.get（'components'）; iterateChildren（childComps， fn）; }); } export function findModels（components， selector...

artf

你实际上可以用“view.$el.data（'model'）”从现金元素实例获取模型，所以你可能用更少的代码就能实现 “''js wrapper.view.$el.find（'#hero .text'）.each（（el， i， $el） => console.log（$el.data（'model'）） ) ```

artf

你可以通过这种方式更新该区块的内容 “''js const dblock = blockManager.get（'dynamic-nav'）; dblock.set（'content'， '<ul>...'）; ```

bungambohlah

哦，我明白了，非常感谢@artf

bungambohlah

你好，@artf我遇到问题，我的动态导航模块现在能用了，但当我给该组件输入某个脚本时，它会给我一个错误“意外标识符”。我可以纠正一下吗？如果没有，请纠正我，非常感谢 这就是我的剧本： “JavaScript ... 动态导航 blockManager.add（'dynamic-nav'， { 标签：“动态导航”， 属性：{ 类别：“Fa fa-省略号-h”， 标题：“插入导航动态菜单” }, 分类：“分区”， 内容：{ 脚本：函数 （） { var contentDynam...

mathieuk

与#481号的复制品

sarathksasi

谢谢

edwardjiawei

类似于我在[grapesjs-plugin-customrte]（https://github.com/edwardjiawei/grapesjs-plugin-customrte/tree/master/src/main.js）中做的。但我不建议我的代码是基于它，因为它很乱。 你应该能在我的仓库里用 design， html 测试代码。 还可以为实现 el.contentEditable 设置较低优先级， 这样占位符文本就无法编辑。[#287]（https://githu...

artf

嗯，我以前没试过，但我觉得你只需要替换[当前命令]（https://github.com/artf/grapesjs/blob/dev/src/commands/view/OpenAssets.js）就能实现。 “''js 编辑。Commands.add（'open-assets'， { run（editor） { ... } }) ``` 这就是命令的名称 https://github.com/artf/grapesjs/blob/e921165a8d681b5d1056...

ryandeba

谢谢@artf！根据你的建议，我很快就让它正常工作了。

lock[bot]

由于关闭后没有近期活动，该帖子已被自动锁定。请为相关漏洞开启新一期。

artf

是的，你说得对，我只用“可编辑”来描述文本组件，但你问的其实很有道理。我很乐意接受你的永久居民。 你应该在模型里加“可编辑：真实”https://github.com/artf/grapesjs/blob/dev/src/domcomponents/model/ComponentImage.js 然后在这里查看视图 https://github.com/artf/grapesjs/blob/dev/src/domcomponents/view/ComponentImageV...

ryandeba

谢谢@artf！这是拉取请求：https://github.com/artf/grapesjs/pull/496

artf

合并 https://github.com/artf/grapesjs/pull/496 👍

thecodefish

在我的使用场景中，我不断在编辑器中获取和设置 html/css，我发现它最终会重复“默认”样式（见上图中的 * 和正体样式——它们出现两次）。 我通过确保在（重新）重置前清除 CSS 来解决这个问题——大致如下： “'' js 编辑。CssComposer.getAll（）.reset（）; editor.setComponents（components）; editor.setStyle（css）; ```

thecodefish

@chiqui3d我认为每当你需要从外部来源修改CSS时，你可能先想重置CSS作曲器。所以如果你的代码里有类似“editor.setStyle（css）;”的设置，你可能需要调用“editor.CssComposer.getAll（）.reset（）;' 首先。

artf

首先，先更新你的 grapesjs 版本，然后更具体地说明你的更改。你改了什么？你说的不需要的CSS是什么意思？

artf

在你的模型中，你不需要定义“data-gjs-*”，它只在从HTML导入时才有意义，所以请去除这个： “''js attributes： { 'data-gjs-type'： 'cust-section'， }， 你不能编辑这个 “''js var rowDiv = document.createElement（'section'）; rowDiv.className = “row”; rowDiv.innerHTML = “示例文本请在此更改”; ``` 因为它只是一个普...

lock[bot]

由于关闭后没有近期活动，该帖子已被自动锁定。请为相关漏洞开启新一期。

artf

讨论过好几次（比如#26） 下次，尝试在打开新期之前先搜索一下（比如“翻译”已经足够了） 谢谢

lock[bot]

由于关闭后没有近期活动，该帖子已被自动锁定。请为相关漏洞开启新一期。

roytang

这个修复方法有效。谢谢！

artf

@roytang你的代码看起来没问题，可能只是你的组件“空得太多”，鼠标指针进不去。试着加一点缓冲，看看效果如何 “''js 内容：'<div class=“image-container” style=“padding：20px”></div>'， ```

roytang

嗯。我用的是宽高100px的图片容器样式。另外，移除扩展模型中的可丢弃属性后，我可以在模型里放进文本和图片。

artf

@krunal039 为什么需要自定义组件？你的模板看起来挺简单的，那就用一个简单的方块怎么样？ “''js 编辑。BlockManager.add（'your-block'， { 标签：“自定义块”， 内容：'<div class=“row-class”> <div class=“column-class”> <img src=“...” /> </div> ... '</div> }) ```

krunal039

@artf感谢回复，我们需要用户输入悬停文字、背景图片和文本，底部有超链接，想用自定义组件，但如果能提示用户输入，我可以直接创建，直接屏蔽，能请你指点我正确的方向吗？我已经挣扎了4-5天吗？

artf

试着用模板创建一个块，拖入画布里，你就能更改所有这些内容