PageKit — 可自托管的 GrapesJS 建站工具，附完整源码。 获取抢先体验
已收录 3,464 个 GitHub 问题 — 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。
找到 3,464 个问题
嘿， 当画布内任何新的方块或内容更新时，我该如何触发某个事件？ 类似“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）） ```
我在 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/...
有没有办法禁用资源上传？我们想强制用户只使用经过批准的图片，并且通过资产管理器对话框。
ryandeba
你好@krunal039， [docs]（https://github.com/artf/grapesjs/wiki/API-Asset-Manager#assetmanager）显示你可以通过“上传：false”来禁用它（见“示例”部分的评论）。你试过这么做吗？我现在没时间自己测试，但如果你试了还是有问题，我很乐意以后帮忙。
artf
@shareefhiasat直接用CSS
ehsantalkhouncheh
upload：false 对我没用:(
有没有办法不允许在页面上多次丢弃某个特定组件？我有自定义组件，用户不能在页面上投放超过一个组件，所以如果组件已经在页面上添加，我希望显示特定信息，不允许在编辑器中被丢弃
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瑞安的建议是实现你请求的正确方式
你好，@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
我也遇到这个问题。
是否可以在装饰标题下单独添加border-top、border-right、border-left属性 grapesjs。这类似于border半径。 目前它只显示边框宽度，这代表所有边框。我只想要右边或左边边框。
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]
由于关闭后没有近期活动，该帖子已被自动锁定。请为相关漏洞开启新一期。
有没有办法在 zeronet 上使用 grapesjs ？https://zeronet.io/ 你可以在 zeronet 上创建网站，但要添加头部、横幅和其他内容，必须进入 CSS 和 HTML 编写代码。我非常讨厌编程，想在 zeronet 上用 grapesjs ，这样我就能用 grapes 拖放功能在 zeronet 上创建网站。这是 zeronet 的 github 页面 https://github.com/HelloZeroNet 如果可以在 zeronet 上使用 grapes ，请告诉我方法。
artf
你好，Jeffery，不幸的是，Daniel 说得对，如果你想在其他项目中使用 GrapesJS，必须先有人（开发者）整合它。 我觉得你至少可以试着问问ZeroNet的开发者他们是否把GrapesJS集成写进了路线图
duskhacker
@Snarkly GrapesJS 并不是一个可直接上手的交钥匙解决方案。你得懂（并做）JavaScript编程，才能让编辑器正常工作。它的目的是为现有的网页栈添加一个高级的 HTML 编辑器。
lock[bot]
由于关闭后没有近期活动，该帖子已被自动锁定。请为相关漏洞开启新一期。
如何在richtexteditor中将文本添加到特定的光标位置？有示例代码吗？急需 谢谢，
ryandeba
你好@NorthstarTech， 你能详细说说“特定光标位置”是什么意思吗？这是选择的开始还是结束？还是说目标位置更有动态？如果能展示你目前的代码示例（显然你问的是如何添加功能，所以它不会完全可用也没关系），或者更完整的你想要什么的描述，对我来说会很有帮助。 据我所见，richtexteditor依赖浏览器内容编辑/选择API来在特定位置/范围插入内容，所以我觉得你可以从那里开始。可以看看RichTextEditor对象中“链接”操作中的“结果”函数（第40行：https...
artf
顺便说一句，谢谢Ryan的详细解释，我觉得这和#111差不多是复制品
lock[bot]
由于关闭后没有近期活动，该帖子已被自动锁定。请为相关漏洞开启新一期。
如何在富文本编辑器中添加有序列表的图标？这是我的代码。 rte.add（'insertOrderedList'， { 图标：“//如何在这里添加订单列表的图标？？ 属性：{标题：“有序列表”}， 结果：（rte， action） => rte.exec（'insertOrderedList'）， });
ryandeba
你可以把“图标”值设置为你想要的任何标记。这里有一个用font awesome的例子： 顺便说一句——我看到有人讨论要把 Grapesjs 的字体 Awesome（字体 Awesome）移除。我不确定目前的计划，但觉得值得一提，因为如果未来版本不包含font awesome，这可能无法实现。
NorthstarTech
非常感谢。现在运行正常。
lock[bot]
由于关闭后没有近期活动，该帖子已被自动锁定。请为相关漏洞开启新一期。
你好@artf，我怎样才能动态导入自动在Canvas中反映的内容。
duskhacker
@suraj740 'editor.setComponents（）' 会同时接受 html/css，所以你可以直接跳过 'setStyle' 调用。至于其他的，你看过存储管理器的文档，对吧？你可以在不按按钮的情况下程序调用“加载/存储”，比如“editor.store（）;editor.load（）'
duskhacker
在我的项目中，我会在一个 HTML 元素上设置 data- 属性，并通过 Javascript 中的 .dataset 提取它们，编辑器配置好后，我会运行： 请注意，HTML 必须设置成让 grapesjs 能够理解的。我认为它必须遵守 BEM（http://getbem.com/） 标准。实际上，我只是创建了几个文档，来了解它应该是什么样子。 另外，HTML/CSS从哪里得到并不重要，可能是远程调用，也可以直接嵌入JavaScript里，我只是举例说明我在做什么。 祝你好运
duskhacker
@suraj740 ^^