GrapesJS 问题

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

找到 3,464 个问题

#5802017年11月28日作者 faizansaiyed3 个回答
3 个反应

当任何方块被放入画布时,会触发任何触发事件吗?

嘿, 当画布内任何新的方块或内容更新时,我该如何触发某个事件? 类似“editor.onCanvasUpdate()”这样的功能 谢谢!

ryandeba

你好@fsaiyedOB, 我通过这里列出的“component:update”事件实现了这一点:https://github.com/artf/grapesjs/wiki/API-Editor#available-events 我的代码大致看起来像

duskhacker

当我询问画布什么时候脏以提供指示时,@artf告诉我:

artf

我还会加一个针对方块的事件 “''js editor.on('block:drag:stop', model => console.log('dropped ', model)) ```

#5792017年11月28日作者 NorthstarTech3 个回答
0 个反应

将 richtexteditor 替换为 CKeditor

我在 grapesjs 中将 richtexteditor 替换为 ckeditor,但还是不起作用。Richtexteditor 依然显示。我该如何解决这个问题?我的代码是: editor.setCustomRte({ Enable: function(el, rte) { rte = new CKEDITOR.inline(el, { 工具栏:[{ 属性: { “class”: “fa fa-image” }, 命令:“开放对话” } ] }); 返回RTE; }, }); 我还添加了这些脚本, <script src=“https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js”>...

ryandeba

你好@NorthstarTech, 我看到你的代码里包含了grapesjs-plugin-ckeditor.js文件。你在调用“grapesjs.init()”时也包含了这个插件吗?如[这里](https://github.com/artf/grapesjs-plugin-ckeditor#usage)所示。

NorthstarTech

是的,我也在 grapesjs.init() 上添加了插件,但没用。它给出了下面所示的误差。 ![错误](https://user-images.githubusercontent.com/33541046/33324406-5b78d432-d471-11e7-9a18-a0e387dec055.png)

ryandeba

我对 ckeditor 插件不是特别熟悉,但看起来它期待的是 sharedspace ckeditor 插件(见 [这里](https://github.com/artf/grapesjs-plugin-ckeditor/blob/b05ecaba1f63f93757b3cde8a17808212f7ad899/src/main.js))。我觉得你只需要确保把那个插件包含在你的 CKEditor 配置里。这里有个链接到那个[插件](https://ckeditor.com/...

#5782017年11月28日作者 krunal0393 个回答
4 个反应

在资产管理器中禁用文件上传

有没有办法禁用资源上传?我们想强制用户只使用经过批准的图片,并且通过资产管理器对话框。

ryandeba

你好@krunal039, [docs](https://github.com/artf/grapesjs/wiki/API-Asset-Manager#assetmanager)显示你可以通过“上传:false”来禁用它(见“示例”部分的评论)。你试过这么做吗?我现在没时间自己测试,但如果你试了还是有问题,我很乐意以后帮忙。

artf

@shareefhiasat直接用CSS

ehsantalkhouncheh

upload:false 对我没用:(

#5772017年11月28日作者 krunal0393 个回答
2 个反应

编辑器中只允许一个特定类型的组件

有没有办法不允许在页面上多次丢弃某个特定组件?我有自定义组件,用户不能在页面上投放超过一个组件,所以如果组件已经在页面上添加,我希望显示特定信息,不允许在编辑器中被丢弃

ryandeba

你好@krunal039, 我最好的建议是关注[component:add](https://github.com/artf/grapesjs/wiki/API-Editor#available-events)事件。在事件监听函数中,你可以检查新增组件是否是你想要的类型,如果画布中出现多个组件,就移除刚添加的组件并通知用户。

bunomonteiro

``` editor.on('component:add', model => { // ...你的逻辑应该放在这里 if(remove){ model.destroy(); } });

artf

@krunal039瑞安的建议是实现你请求的正确方式

#5762017年11月28日作者 ryandeba3 个回答
5 个反应

文本内容不总是可编辑的

你好,@artf, 我注意到如果我添加了包含文本和“<a>''标签组合的组件,文本就不像平时那样可编辑。如果我把“''标签换<a>成”,那<span>我就能很好地编辑文本。这里有个说明我的意思(注意最后两行代码,用来切换坏掉的示例和工作示例):https://jsfiddle.net/wycrpkay/3/。这种情况可能发生在除了“'之外的标签,但到目前为止我注意到只有”'这个标签<a>有问题。 在我看来,这个组件被解析成默认的组件类型,而不是文本组件,但我不明白为什么出现“<a>''标签(而不是其他标签)会导致这种情况。我看到ComponentText.js没有“isComponent”函数,所以我不太明白这个区分是怎么产生的。...

artf

谢谢你,Daniel,我同意你的看法,会处理你的建议。 我想指出,针对第四种情况,你也可以明确向编辑器指示 是文本组件所在位置 '''html <div data-gjs-type=“text”> 某个文本节点 <div>文本编辑</div> <ul>......</ul> </div> ```

artf

应该能解决了 https://github.com/artf/grapesjs/releases/tag/v0.12.50

duskhacker

我也遇到这个问题。

#5752017年11月27日作者 NorthstarTech3 个回答
0 个反应

边界宽度属性

是否可以在装饰标题下分别添加border-top、border-right、border-left属性,用葡萄?这类似于边界半径。 目前它只显示边框宽度,这表示所有边框。我只想要左右边框。

ryandeba

你好@NorthstarTech, 我没有代码示例,但你看过 https://github.com/artf/grapesjs/wiki/API-Style-Manager#addproperty 吗?那里有个例子添加了“最小高度”——你能不能修改这个例子以符合你的需求,遇到问题时再反馈代码?

artf

@NorthstarTech 右边界示例 “''js 编辑。StyleManager.addProperty('Decorations', { 名称:“边境右翼”, 财产:“边界权”, 类型:“综合”, 性质: [{ 名称:“宽度”, 类型:“整数”, 单位:['PX', 'Em', 'REM'], 属性:“border-right-width”, },{ 名称:“风格”, 类型:“选择”, 属性:“border-right-style”, 选项:[ {value: 'no...

lock[bot]

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

#5742017年11月26日作者 Snarkly3 个回答
3 个反应

使用 Grapes 配合 Zeronet。

有没有办法在 zeronet 上使用 grapesjs?https://zeronet.io/ 你可以在 zeronet 上创建网站,但要添加头部、横幅和其他内容,你必须进入 CSS 和 HTML 编写代码。我非常讨厌编程,想在 zeronet 上使用 grapesjs,这样我就能用 grapes 拖放功能在 zeronet 上创建网站。这是 zeronet 的 github 页面 https://github.com/HelloZeroNet 如果可以在 zeronet 上使用葡萄,请告诉我怎么做。

artf

你好,Jeffery,不幸的是,Daniel 说得对,如果你想在其他项目中使用 GrapesJS,必须先有人(开发者)整合它。 我觉得你至少可以试着问问ZeroNet的开发者他们是否把GrapesJS集成写进了路线图

duskhacker

@Snarkly GrapesJS 并不是一个可直接上手的交钥匙解决方案。你得懂(并做)JavaScript编程,才能让编辑器正常工作。它的目的是为现有的网页栈添加一个高级的 HTML 编辑器。

lock[bot]

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

#5732017年11月26日作者 NorthstarTech3 个回答
1 个反应

Richtexteditor 中特定位置的文本

如何在richtexteditor中将文本添加到特定的光标位置?有示例代码吗?急需 谢谢,

ryandeba

你好@NorthstarTech, 你能详细说说“特定光标位置”是什么意思吗?这是选择的开始还是结束?还是说目标位置更有动态?如果能展示你目前的代码示例(显然你问的是如何添加功能,所以它不会完全可用也没关系),或者更完整的你想要什么的描述,对我来说会很有帮助。 据我所见,richtexteditor依赖浏览器内容编辑/选择API来在特定位置/范围插入内容,所以我觉得你可以从那里开始。可以看看RichTextEditor对象中“链接”操作中的“结果”函数(第40行:https...

artf

顺便说一句,谢谢Ryan的详细解释,我觉得这和#111差不多是复制品

lock[bot]

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

#5722017年11月26日作者 NorthstarTech3 个回答
1 个反应

富文本编辑器问题

如何在富文本编辑器中添加有序列表的图标?这是我的代码。 rte.add('insertOrderedList', { 图标:“//如何在这里添加订单列表的图标?? 属性:{标题:“有序列表”}, 结果:(rte, action) => rte.exec('insertOrderedList'), });

ryandeba

你可以把“图标”值设置为你想要的任何标记。这里有一个用font awesome的例子: 顺便说一句——我看到有人讨论要把 Grapesjs 的字体 Awesome(字体 Awesome)移除。我不确定目前的计划,但觉得值得一提,因为如果未来版本不包含font awesome,这可能无法实现。

NorthstarTech

非常感谢。现在运行正常。

lock[bot]

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

#5712017年11月25日作者 suraj7403 个回答
3 个反应

动态导入内容

你好@artf,我怎样才能动态导入自动在Canvas中反映的内容。

duskhacker

@suraj740 'editor.setComponents()' 会同时接受 html/css,所以你可以直接跳过 'setStyle' 调用。至于其他的,你看过存储管理器的文档,对吧?你可以在不按按钮的情况下程序调用“加载/存储”,比如“editor.store();editor.load()'

duskhacker

在我的项目中,我在HTML元素上设置了“data-”属性,并通过Javascript中的“.dataset”提取,编辑器配置好后,我运行: 请注意,HTML必须设置成葡萄用户能理解的。我认为它必须遵守BEM(http://getbem.com/)标准。实际上,我只是创建了几个文档,来了解它应该是什么样子。 另外,HTML/CSS从哪里得到并不重要,可能是远程调用,也可以直接嵌入JavaScript里,我只是举例说明我在做什么。 祝你好运

duskhacker

@suraj740 ^^

浏览所有主题