GrapesJS 问题

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

状态

排序

找到 1,399 个问题

🔍 outdated

#4602017年10月28日作者 roytang3 个回答

2 个反应

已过时

当组件视图修改HTML时，文本组件不再可编辑

我正在尝试构建一个自定义组件，内容中包含一些Lorem ipsum文本，以便在画布上进行编辑。但我也想修改视图中的HTML（添加一些我想在编辑器中显示但不在已保存HTML中的内容）。我尝试过类似这样的方法：问题是，如果我像上面那样修改render（）函数，文本部分中的文本组件（h1和p）就无法通过双击文本编辑。有没有更好的方式来实现我想做的事情？谢谢！

roytang

我尝试了上述方法，具体如下：但在把组件放到画布后，我仍然无法编辑 h1 和 p 元素的文本。:(

artf

抱歉我之前没注意到 “''js var html = this.el.innerHTML; html = “<h1>ABC</h1>” + html; this.el.innerHTML = html; ``` 你基本上是移除模型中的元素，并以HTML形式附加一个新字符串（编辑器已经无法访问他们的模型了）。如果你想添加新组件，应该通过模型来实现（例如 'view.model.append（<div>'stuff</div>'）'）

artf

你可以扩展文本组件，而不是基础组件 “''js const defaultType = comps.getType（'default'）; const textType = comps.getType（'text'）; ... view： textType.view.extend（{ ... ```

查看详情

#4592017年10月28日作者 roytang3 个回答

1 个反应

已过时

在另一个模块中包含自定义组件时出现错误

抱歉标题有点模糊。我不太确定如何简洁地描述。我有一个自定义块，想限制只有图片可以被丢入块的某个部分。我尝试过类似这样的方法：然而，当我这样做时，尝试将方块从方块调色板中拖出时，会出现以下错误： ... grapes.min.js：2 未捕获类型错误：s 不是构造函数 at F.i.addToCollection （VM6196 grapes.min.js：2）在VM6196 grapes.min.js：2 at Function.C.each.C.forEach （VM6196 grapes.min.js：2） at F.i.each （VM6196 grapes.min.js：2） at F.i.render （VM6196...

roytang

既然你的评论已经修正了我遇到的原始错误，我会关闭这条评论，专门发一条评论来解答关于可丢弃属性使用的问题。

artf

当你定义新的组件类型时，“视图”是必不可少的 “''js comps.addType（'image-container'， { 模型：defaultModel... 查看：defaultView; }); ```

roytang

谢谢！添加 defaultView 确实解决了错误，但我仍然无法实现我想要的操作——我似乎无法将图片放入上面样本的“image-container”部分。当我尝试把图像组件放在那里时，它反而入到包含“测试块”的区域里。我的测试代码现在是：我是不是用错了“可掉落”这个属性？只需要是CSS选择器，对吧？

查看详情

#4572017年10月28日作者 mekamleshk2 个回答

0 个反应

已过时

两个快速问题

你好@artf 1）我的编辑模板是这样的： ![1]（https://user-images.githubusercontent.com/16983847/32127077-ede6df38-bb91-11e7-819f-e8e805403e3d.JPG）我想更改对齐方式，并在左角加一个像这样返回按钮： ![2]（https://user-images.githubusercontent.com/16983847/32127103-21c5d764-bb92-11e7-824d-072f653e3c23.JPG） 2）不知道为什么每次选择文本时，ckeditor选项总是出现在顶部： ![捕获]（https://user-imag...

artf

检查[Panels API]（https://github.com/artf/grapesjs/wiki/API-Panels），或者你也可以在编辑器加载后添加或删除内容 “''js editor.on（'load'，（） => { 在这里更改你的DOM }) ```刚试了演示，效果如预期，可能你有多个嵌套的文本组件，那时工具栏会出现在最高可编辑组件上方

lock[bot]

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

查看详情

#4562017年10月27日作者 leantorres733 个回答

0 个反应

增强已过时

Combobox 跨浏览器问题

我发现combobox在不同浏览器上有不同的样式。 Firefox 56.0.2（64位）： ![captura de pantalla 2017-10-27 a las 17 23 49]（https://user-images.githubusercontent.com/12806363/32123725-92af301a-bb65-11e7-8029-6d1142692128.png）铬： ![capture de pantalla 2017-10-27 a las 17 26 47]（https://user-images.githubusercontent.com/12806363/32123822-fa06f5e0-...

santiph

启用Light主题后，这就是Firefox for OSx上的选择框的样子 <img width=“198” alt=“截图 2017-10-27 19 15 28” src=“https://user-images.githubusercontent.com/747646/32127161-47023f32-bb4b-11e7-8f55-b0eeab1171e6.png”> @artf为了保持一致性，不同浏览器中选择框应该如何表现和呈现？是本地的还是定制的？

leantorres73

@artf如果你给我指示，我可以帮你做，或者如果你愿意，我可以提出建议。

artf

谢谢@leantorres73如果能有个人记录就太好了。这一切都关乎CSS，问题在于<option>应该在这里的“样式”： https://github.com/artf/grapesjs/blob/dev/src/styles/scss/gjsinputs.scss （试着搜索'选项'）我觉得最好把那些造型全部删掉

查看详情

#4552017年10月27日作者 krunal0393 个回答

0 个反应

已过时

需要帮助：请求用户输入文本/图片网址/超链接

我们正在构建一个模板，它会渲染带有背景图像的 div，鼠标悬停时会显示一些文本，点击时会有超链接，应该会引导用户到图片下方的标题。我们已经构建了模板，但无法以用户丢弃模板后弹出窗口，提供所有必要信息，用户提供后再渲染模板的方式

artf

请查看这里 #286

krunal039

@artf谢谢回复，但我还是不明白如何用组件来创建模块，因为组件是构建模块，模块会由组件组成。我们希望有一个单一窗口，用户可以提供所有关于块掉落的信息。

artf

可以查看[块]（https://github.com/artf/grapesjs/wiki/Blocks）和[组件]（https://github.com/artf/grapesjs/wiki/Components）文档

查看详情

#4542017年10月26日作者 Geczy3 个回答

3 个反应

已过时

让块管理器默认开放面板？

我试过这个代码： “''js 默认显示方块，不是样式编辑。Panels.getButton（'views'， 'open-sm'）.set（'active'， false）编辑。Panels.getButton（'views'， 'open-blocks'）.set（'active'， true） ``` 这个方法能行，但这样做会在左上角隐藏设备选择器，原因不明。

artf

试试用 “''js 编辑。Panels.getButton（'views'， 'open-blocks'）.set（'active'， true） ``` 但要把它放在渲染之后（如果你用的是“autorender： false”）。

Geczy

啊，设置在渲染后效果很好。谢谢

lock[bot]

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

查看详情

#4532017年10月26日作者 deffrin3 个回答

0 个反应

已过时

之前保存的CSS规则在样式管理器中未显示

之前用远程方法保存的CSS规则在样式管理器中不显示。远程 JSON 响应 '{“gjs-assets”：“”，“gjs-css”：“*{box-sizing： border-box;}body{margin：0;}#c743{background-color：#b0aeae;}body{margin-top：0px;margin-right：0px;margin-bottom：0px;margin-left：0px;}#c743{background-color：rgb（76， 70， 70）;}body{margin-top：0px;margin-right：0px;margin-bottom：0px;margin-left：...

artf

发布 grapesjs 的配置及其版本

deffrin

“''js VAR Editor = Grapesjs.init（{ 容器：“#gjs”，插件： ['gjs-blocks-basic']， protectedCss： “， storageManager： { 类型：“远程”， stepsBeforeSave：10，自动加载：正确， urlLoad： baseurl+'superadmin/educationalContent/getlearnpage/'+<？php echo $conceptid; ？>， cont...

artf

试试最新版本

查看详情

#4522017年10月26日作者 thecodefish3 个回答

0 个反应

已过时

自定义缩小器问题（或者说是我保存/加载组件的方式）

我正在尝试为我的一个组件制作一个定制的缩小器。这是一个基于Flexbox的网格/列布局，我希望用户能够调整一列大小（固定宽度），其他列填满剩余空间。我已经为我的列自定义了一个组件，所以我给它添加了调整尺寸配置，包括一个 updateTarget（）函数，效果非常好。但是，如果我保存了这些内容，然后再回来查看，updateTarget（）函数就永远不会被调用。我添加到画布中的新组件都能正常工作，但现有的组件却不行。这是我的配置： “'' js { 类型：“网格鞍部”， “自定义名称”：“列”，类：[''flex-item']，可调整大小：{ TL： 0， TC： 0， TR： 0， BL：0，BC：0，BR：0， upd...

artf

是的，你说得对。这是因为函数不可序列化，因此当 grapesjs 调用 'JSON.stringify（Component）' 时，就是直接被抄袭了。你的解决方案是覆盖自定义组件中的“toJSON”方法 “''js 编辑。DomComponents.addType（'grid-col'， { 型号：...... 默认值：... // 这里你定义可调整大小 ... 然后避免储存 toJSON（） { const obj = defaultModel.prototype.to...

thecodefish

谢谢@artf这招起了作用。

sakshigarg9

@thecodefish 如何更改Resizer属性的初始状态？如果我用的是grapesjs-preset-webpage，这个配置会放在哪里？就在grapesjs.init{...}下面？我想专门为图像组件设置最小尺寸，并禁用一些角点，比如 tl、tc、tr。

查看详情

#4512017年10月26日作者 alexlyul2 个回答

0 个反应

已过时