PageKit — 可自托管的 GrapesJS 建站工具，附完整源码。 获取抢先体验
已收录 3,464 个 GitHub 问题 — 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。
找到 1,399 个问题
🔍 outdated嗨。我需要在这种情况下触发这个事件：我有一些元素需要在预览模式下隐藏，等我退出预览模式时才能显示出来。但是，当我退出预览并返回画布编辑时，事件stop：preview不会触发。我自己也做过一个效果不错的解决方案，但我不确定这是不是合适的方案。这就是为什么我发的是我私密git里的解决方案截图，而不是发送拉取请求，希望你能在Grapes上实现，如果这是个好方案。谢谢。 ![captura de tela 2017-11-28 as 16 27 05]（https://user-images.githubusercontent.com/7770605/33340655-76e63d7e-d45b-11e7-86ea-c0685d6aeb...
theanhmx
@artf为这个愚蠢的问题道歉， 但修复修复什么时候会在NPM包里提供？ 或者我可以从哪个分支手动拉取带有这个修复的代码并构建？
lock[bot]
由于关闭后没有近期活动，该帖子已被自动锁定。请为相关漏洞开启新一期。
你好@artf使用自定义管理器时还有一个问题，背景图片该设置什么？ editor.getSelected（）.set（'src'， url）无法在背景图像上工作。 我应该把“src”替换成“background”吗？
artf
用这个 “''js editor.getSelected（） .addStyle（{'background-image'： 'url（${url}）'}）; ```
suraj740
@artf 谢谢你出色的工作，兄弟！👍
lock[bot]
由于关闭后没有近期活动，该帖子已被自动锁定。请为相关漏洞开启新一期。
[Editor API wiki]（https://github.com/artf/grapesjs/wiki/API-Editor） 列出了一组可以监听的组件相关事件（例如 'component：add'， 'component：update'）。然而，没有提及监听者接收到的事件对象类型以及它们的结构（它们拥有哪些属性以及能包含哪些值）。 当组件更新（例如字体大小更改）时，我们需要能够捕捉事件、处理并做出反应。你能举个例子说明如何判断组件发生了哪些变化吗？每次触发“component：update”事件时都会有变化吗（这个事件经常被触发，为什么会这样）？每个事件是否都会收到组件模型，如“component：add”文档附近提到的...
ppisecky
@artf谢谢你的回答。不过我想找一个更通用的例子，说明是否发生了变化以及具体发生了什么——比如这样： “JavaScript editor.on（'component：update'， model => { 如果 （model.isChanged（）） { //.... } if （model.isChanged（'style：font-size'）） { //.... } var changes = model.getChanges（）; }); ``` 我们需要跟踪项...
artf
感谢@ppisecky指出，我更新了源代码，但基本上任何组件相关事件都会接收触发的模型。 关于你的“字体大小”情况，你可以设置这个监听器 “''js editor.on（'component：styleUpdate：font-size'， model => console.log（'Font size： '， model.getStyle（）['font-size']） ); ```
lock[bot]
由于关闭后没有近期活动，该帖子已被自动锁定。请为相关漏洞开启新一期。
嘿， 当画布内任何新的方块或内容更新时，我该如何触发某个事件？ 类似“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， 我最好的建议是关注[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]
由于关闭后没有近期活动，该帖子已被自动锁定。请为相关漏洞开启新一期。