GrapesJS 问题

已收录 3,464 个 GitHub 问题 — 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。

状态

排序

找到 3,464 个问题

#9162018年3月1日作者 tommedema3 个回答

1 个反应

为什么图层没有元素标签名称？

我正在尝试 grapes内部结构，因为我将来想有所贡献。我主要感兴趣的是用通用的HTML网站来做值得，无论CSS和HTML的风格和结构如何（包括doctype、body support等）。我原本以为 layers 层级会代表DOM树。虽然目前看起来是这样，但元素的命名似乎不对劲。例如，这个HTML代码： <img width=“392” alt=“截图 2018-03-01 11 27 28” src=“https://user-images.githubusercontent.com/331833/36839889-902ba6da-1d43-11e8-8dd3-db4f832fc34a.png”> 会这样显示： <img...

maxtacco

顺便说一下，看起来图层管理器在 https://github.com/artf/grapesjs/blob/49100b2f63411fb08d438d21a5f7ff9131773a75/src/navigator/view/ItemView.js#L28 中渲染树节点时使用了组件的 https://github.com/artf/grapesjs/blob/49100b2f63411fb08d438d21a5f7ff9131773a75/src/dom_componen...

maxtacco

GrapesJS 是基于组件的。所以，我认为在这种情况下它显示的是组件名称，而不是标签名称。我觉得添加标签名称和/或自定义图层树渲染会是个不错的改进。

maxtacco

实际上，GrapesJS 组件可能包含多个 DOM 元素，因此在这种情况下显示标签名称可能不合理，因为你是为组件做样式，而不是单个元素。

查看详情

#9152018年2月28日作者 JulyanoF3 个回答

0 个反应

移除屏蔽时启用确认框

有没有什么选项可以在删除任何封锁前激活确认框？

artf

没有，但你可以扩展默认的“tlb-delete”命令 “''js 编辑。Commands.add（'tlb-delete'， ed => { 如果（确认（'确定？'））{ const selected = ed.getSelected（）; Selected & & select.destroy（）; } }); ```

Iceweex

@artf这只能在工具栏按钮上用，但我按键盘上的“删除”键时却不行。我该如何覆盖这个事件？

artf

你好，@Iceweex，很遗憾，目前你不能。下一个版本我会集中管理这些命令，并更新其事件生命周期，这样你就能通过这种方式完成任务 “''js const commandName = 'core：component-delete'; editor.on（'run：${commandName}：before'，（options） => { console.log（'在${commandName}'之前）; 如果（！确认（'你确定吗'）））{ options.abort = 1...

查看详情

#9142018年2月28日作者 nojacko3 个回答

3 个反应

已过时

： Grapes 不能用新的HTML重新启动

更改HTML后调用init()Grapes失败。这种情况发生在单页应用上。我觉得需要一个destory()函数来优雅地重置Grapes。https://jsfiddle.net/wdtrg1je/（非常基础的单页应用模拟）点击“添加Grapes”（加载带有一些 HTML 的Grapes）点击“链接”，将其href改为http://yahoo.com点击“移除Grapes”。这会在删除grapes元素之前从Grapes获取 HTML。再次点击“添加Grapes”。这从新的 HTML Grapes开始，它与原 HTML 不同。控制台错误。 ![截图 2018-02-28 14 54 20]（https://user-images.g...

nojacko

看来我不是唯一一个想要这个的人😉。单页应用才是这点的价值所在（这是我提出的问题，但也能释放一些内存）。等我有新东西时会争取个人代表。

artf

正如前面提到的（https://github.com/artf/grapesjs/issues/849#issuecomment-364279629），目前我觉得启动这样的功能（创建一个好的摧毁方法）没有什么价值，但非常希望看到一些公关的进展:)

lock[bot]

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

查看详情

#9132018年2月28日作者 richardabear3 个回答

0 个反应

使用样式标签代替CSS

你好，我一直在查看dom_components内部，但似乎没弄明白如何手动覆盖样式部分。我需要一个方法让组件能够将所有新样式保存到样式标签中，而不是实际的 CSS 类。（试试移动一个用强制 CSS 样式化的组件），这样所有样式就会被移除。希望你能帮忙，此致敬礼，理查德

ryandeba

你好@Owchzzz， GrapesJS 的核心似乎已经内置了组件不会带有样式标签——参见[这个例子]（https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/Component.js#L697），其中样式标签被明确移除了。我不确定修改这个行为是否能完全解决你的使用场景，但你可以先用以下代码覆盖它：你可能希望这些代码在内容尚未导入编辑器之前运行，所以最好放进插件里。如果你做了这些还没解决，告诉我...

Amir2828

那么你有没有找到一个完整的解决方案，保持样式标签不变？

amenk

@ryandeba的解决方案似乎只影响了像“<div style=”...“>”这样的内联样式属性的使用。（但对我来说，这些也没有被过滤掉，除非覆盖了那个原型。我们遇到的问题是被过滤掉了，不确定楼主是否也有同样的问题

查看详情

#9122018年2月28日作者 nojacko3 个回答

2 个反应

需要帮助已过时

：HTML 属性/特征未逃逸

当属性加上双引号时，会导致 HTML 变质。https://jsfiddle.net/szLp8h4n/拖入链接块。点击编辑器中的链接进入“组件设置”面板在“title”栏输入“这是”示例“。点击查看代码图标。生成无效的HTML '''html <div class=“c318”>Hello World!!</div> <a title=“这是一个”示例“” class=“c739”>链接</a> ```

artf

谢谢你接住我，詹姆斯欢迎永久居民

artf

@nojacko我不会在发布前构建文件，所以如果你用的是“dist”里的文件，你还是用旧的

artf

由 https://github.com/artf/grapesjs/pull/939 修复

查看详情

#9112018年2月28日作者 rajatkumcom3 个回答

0 个反应

已过时

有人能帮我解决自定义加载吗？

我可以用什么代替跟随—— editor.setHtml（ arrdata['html'] ）， editor.setCss（ arrdata['css']），请用下面的代码。

rajatkumcom

以下是我的代码： “''js 编辑。Commands.add（ 'load-command'， { run（编辑，发送者） { editor.load（（） => { sender.set（'active'， 0）; }); var arrhtmldata = {}; arrhtmldata['nid'] = 65; arrhtmldata['contenttype'] = “”“; arrhtmldata['op'] = “loadContent”; $.Ajax（{ U...

artf

只是别用它们来加载模板数据 “''js editor.setStyle（ arrdata['style']）， editor.setComponents（ arrdata['components'] ）; ``` 这就是你需要的全部

rajatkumcom

谢谢......

查看详情

#9102018年2月28日作者 tommedema3 个回答

1 个反应

已过时

：支持没有预定义CSS结构的现有HTML页面的复杂度估计？

我有大量静态网站，有些是很久以前开发的（用Bootstrap等），有些是最近开发的（用CSS Grid等）。有些使用内联样式，有些使用基于类的样式，有些基于组件层级（例如“#id > div > ul > li”），有些则直接通过 html 组件名样式（例如 'form'），还有些则结合这些元素。我相信 Grapes 只支持类似 BEM 的 CSS 样式。也就是说，每个组件都有自己的类。这是正确的吗？此外，这些静态站点中有些依赖于大型CSS库，比如Bootstrap，我想把它们传递到'grapes.init'的'style'属性里。实现这一点会非常有挑战性吗？我要内置支持任意CSS样式会有多复杂？这需要彻底改造吗？还是说其实...

tommedema

@artf谢谢，我明白了。我其实喜欢你依赖浏览器的CSS解析器，因为我已经注意到大模板的性能问题。如果你还依赖postcss，我担心性能可能会进一步下降。我目前正在用各种模板测试 Grapes 。我会整理一份小提琴问题清单。大多数渲染问题源于文档类型未被应用，但也有一些其他问题。还有一些功能问题，比如如果你复制了一个组件，然后更改它的样式，原始组件的样式也会被调整。这似乎是因为 grapes 调整的是原始类，而不是为你选择的组件内联编辑样式。我也希望自己能有所贡献，所...

artf

我相信 Grapes 只支持类似 BEM 的 CSS 样式。也就是说，每个组件都有自己的类。这是正确的吗？是“选择器/类查看器”，只能让你编辑基于类的选择器的样式，比如“.class1” “.class1.class2”，但GrapesJS应该能顺利导入你所有的规则此外，有些静态站点依赖于像 Bootstrap 这样的大型 CSS 库，我想把这些库传递到 grapes.init 的 style 属性中。实现这一点会非常有挑战性吗？你可以用这种方式加载外部内容 “''js...

tommedema

@artf 谢谢你的回答！我觉得我可能需要详细解释一下我的使用场景。并不总是指望导入模板的人能定义来自外部库的CSS。原因在于CSS通常会被编译并压缩成一个捆绑包。因此，引导规则等将与该HTML页面的规则合并。因此无法定义哪些文件应该单独导入。我说的任意CSS样式是指用CSS选择器为HTML元素做样式的不同方式集合（类、原生HTML元素与内联等）。到目前为止，我注意到我当前模板在 Grapes 编辑器中渲染错误的三个原因：模板的文档类型被忽略;HTML4 模板的渲染方...

查看详情

#9092018年2月28日作者 konstantin550003 个回答

0 个反应

已过时

事件不是在画布上拖放的。

大家好。问题是：事件在拖延（进入）画布后，就不再火了。 editor.on（'canvas：dragover'） Editor.on（'canvas：drop'） Editor.on（'canvas：Dragenter'） editor.on（'canvas：dragend'）代码就是仓库里的演示代码，加上这4个事件。这是代码：var editor = grapesjs.init（{显示偏移量：1，noticeOnUnload： 0，容器：“#gjs”，高度：“100%”，fromElement： true，storageManager： { autoload： 0 }，styleManager ： {扇区：[{名：“将...

konstantin55000

代码就是语法。合理。这里有代码的 jsfiddle https://jsfiddle.net/s9b2k7vp/ 这是演示： https://www.screencast.com/t/pWcpkM7QO

konstantin55000

更新。事件正在触发，但就在块块掉落到画布之后。我不确定这是不是个问题，因为那Event canvas：dragend和canvas：dragover呢，如果方块没有落入画布，它们就根本不会发射。这是演示，请查看视频： https://www.screencast.com/t/9xHVwwp3C54J https://jsfiddle.net/s9b2k7vp/2/

konstantin55000

非常抱歉。事件不是火灾，因为事实并非如此grapes.js 感谢大家的关注。

查看详情

#9082018年2月28日作者 sbarfurth2 个回答

0 个反应

已过时

为面板和其他编辑器元素添加自定义类

使用提供自定义类的UI框架时，如果能在面板等环境中使用这些类就更好了，这样你就不用重写CSS。一种可能的语法可能如下： “''js panelManager.addPanel（{ id：“myNewPanel”，可见：真，按钮：[...]，类： ['myCustomClass'， 'so-custom']， }); 我还没找到专门针对面板的办法。不过我认为这对任何编辑器的UI元素都很有用。

artf

你可以这样设置属性 “''js 编辑。Panels.addPanel（{ id：“myNewPanel”， ... 属性： {'data-stuff'： 'val1'， 'classe'： 'val2'} }) ```

lock[bot]

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

查看详情

#9072018年2月28日作者 josefph3 个回答

1 个反应

已过时