GrapesJS 问题

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

找到 183 个问题

🔍 documentation
#32342021年1月15日作者 tonypartridge1 个回答
0 个反应

绝对模式和动态标签位置不正确......

我遇到这个问题......我有一个“文本”框,设置为全宽,但中心放一个名字短码。然后生成PDF和HTML页面,并期望名称会成为核心。但由于名称大小可能不同,我刚意识到绝对定位仍然是取容器大小的值,而不是设定宽度。相关示例见附图。 我们有什么建议能解决这个问题吗? 我们在生成HTML和PDF文档时使用绝对定位。 ![葡萄-j-design](https://user-images.githubusercontent.com/1400982/104709811-3fbac080-5717-11eb-8656-66a2db1ec600.png) ![葡萄-js-html](https://user-images.githubuserco...

ClaudeCode

谢谢你举报,@tonypartridge。 关于绝对模式和动态标签位置未正确......的好问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('someth...

#32312021年1月13日作者 vatte214 个回答
2 个反应

如何更改 GJS-CKEDITOR-Format 组件

大家好, 我们都知道 GJS-CKeditor-plugin 是处理 [data-gjs-type]=“text” 组件的。 我想知道,我们能不能改变这个选项? 我想自己创建一个自定义组件,比如 [data-gjs-type]=“anyDiv”,并且拥有类似的功能 [data-gjs-type]=“text”。也许有人知道怎么改变? 也许我可以在 CKeditor 配置里改一下?例如,当我们初始化CKeditor时: 选项:{ !!!!!例如: 格式:'text',想添加('anyDiv'), 语言:“恩”, startupFocus:确实如此, extraAllowedContent: '();{}', // 允许任意类和任意内...

Abhisheknanda1344463

@vatte21 让你的组件可以编辑。你必须这样扩展组件中的文本类型 “''js 编辑。Components.addType('anyDiv', { 型号:{ 默认值:{ 类型:“文本”, 特质:[ ...编辑。Components.getType(type.id).model.prototype.defaults.traits, ...[] ] }, reRender() { this.view.render(); }, }, 扩展:“文本”, isComponent:...

vatte21

@Abhisheknanda1344463 谢谢!我会试试

abulka

@Abhisheknanda1344463你的代码片段给我提示错误“Uncaught ReferenceError: type is not defined” “类型”在哪里定义?

#32302021年1月13日作者 alivex3 个回答
0 个反应

Modal 关闭后动态关闭后不会打开

你好; 谢谢大家提供这么棒的工具,我真的很喜欢文档,使用起来很简单。 我觉得我遇到了第一次动态关闭模态后再也打不开的问题。 示例:

artf

我无法在官方演示中复现,比如说。 “''js editor.on('modal:open', () => { console.log(“模态开启”); setTimeout(() => { console.log(“闭调式”); 编辑。Modal.close() }, 2000) }); ``` 但根据你的代码,我觉得它没打开是因为你在打开后(刚触发开启)就立刻关闭了,难道我漏掉了什么?!

no-response[bot]

由于我们请求原作者提供更多信息未获回应,本期已自动关闭。仅凭当前期刊中的信息,我们没有足够的信息采取行动。如果您有答案或找到我们需要的答案,请随时联系我们,以便我们进一步调查。

ClaudeCode

谢谢你举报,@alivex。 感谢你分享关于Modal动态关闭后无法打开的报告。为了帮助团队调查并优先排序: 请提供: 一个最小可复现的例子(CodeSandbox/JSFiddle) 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么: 简约代码示例(不是你整个项目) 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS配置 有了这些细节,维护者可以更快地识别和优先排序修复。Grape...

#32222021年1月7日作者 bgrand-ch3 个回答
0 个反应

新节点添加后,如何刷新/重新渲染?

我会手动在渲染组件中添加一个新节点。 视觉效果还可以,但无法保存,因为我的风格不是用自动生成的GrapesJS ID。 要手动解决这个难题,我双击要进入的组件,然后在画布主体中点击外部。然后,将 GrapesJS ID 和 'data-gjs-type='text' 添加到新节点,从而可以保存。 Vue.js: “Main.vue”文件的一部分: “''js 文本编辑器 https://grapesjs.com/docs/api/richtexteditor.html https://css-tricks.com/creating-vue-js-component-instances-programmatically/ const...

bgrand-ch

优化后的“TextEditor.vue”文件: “''js // ... onFontValidate () { const { rte } = this.getRteData() const spanNode = document.createElement('span') 设 anchorNode = {} this.selection.childNodes.forEach(childNode => { console.log({ childNode }) if (ch...

bgrand-ch

i️ 它不能直接用 HTML,只能用 JSON。 Component = JSON 节点(html元素 + GrapesJS 数据) “''js addStylesToText (styles, tagName = 'span') { const inlineStyles = styles.map(style => style.join(':')).join(';') + ';' const selectedComponent = this.editor.getSelect...

ClaudeCode

谢谢你举报,@bgrand-ch。 关于新节点添加后如何刷新/重新渲染?的好问题。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something...

#32182021年1月5日作者 bgrand-ch4 个回答
2 个反应

如何添加带有内联样式的新HTML元素?

我想在“rte.selection()”周围添加一个带有内联样式的新HTML元素。 以下面的例子来说,HTML还可以,但JSON部分可能不太行: “''js const editorRte = this.editor.RichTextEditor // ... editorRte.add('fontSize', { 图标:” <select> <option value=“” 已禁用 已选中>Size</option> <option value=“8px”>8 pixels</option> <option value=“12px”>12像素</option> <option value=“16px”>16像素</option>...

artf

@bgrand-ch,你说的“可能”是什么意思?😅

bgrand-ch

@artf感谢你的快速回复🙂,更新到“0.16.30”后我的问题就解决了。 🎉

bgrand-ch

https://github.com/artf/grapesjs/issues/3069 🤔

#32162021年1月5日作者 tomhatzer4 个回答
2 个反应

功能:通过资产管理器添加 referrerPolicy 以加载图片

你想给GrapesJS添加什么? 我正在尝试通过资产管理器为图片加载添加“Referer”头。 详细描述你的功能需求详细 我正在开发一个托管在AWS上的页面构建器。为了防止别人热链接我的图片,我实现了AWS WAF,限制图片加载到referer域(我自己的域名)。 当用“.src”程序加载图像时,没有发送referer头,导致图像损坏或无法显示(服务器出现403个错误)。我们可以通过将“refererPolicy”属性设置为“origin”来解决这个问题。更多详情请见此处:https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/referrerPolicy...

artf

正如对PR的回复,如果需要,可以扩展图像组件来实现,而不会破坏对他人的集成。 顺便说一句,当你想添加某个功能时,你应该始终考虑这对他人的使用方式。所以,如果“referrerPolicy”功能提供了更多选项,那么让它可自定义可能更合理,这样新功能也能适用于其他情况(你不能只强制它“origin”,因为它适合你的情况)。

tomhatzer

非常感谢你的建议@artf——我会尝试通过扩展原始组件来完成这件事。祝你有美好的一天!😃

tomhatzer

对于所有遇到iframe无法发送里面内容引用头的人,这里有一个快速且粗略的解决方案。 只需将Canvas iFrame的“src”设置为你想要的域名,并用这个引用器。就我而言,我希望和编辑器显示的网页用的是相同的域名。 在渲染时,'srcDoc' 属性会引路,然后是 'src' 属性。 请注意,在Canvas iFrame加载后设置可能会导致错误,所以可以尝试操作Canvas视图的属性(据我所知,这不直接实现)。

#32042020年12月22日作者 maivanchuong2 个回答
0 个反应

我想在MVC里保存并加载并 asp.net

警告 请阅读并遵循接下来的三步,然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下,看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答,否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 版本: 你可以在控制台输入“grapesjs.version”获得版本 你能重现演示中的bug吗? [ ] 是的 [ ] 不 预期的行为是什么? 详细描述那个漏...

artf

不要不尊重,阅读并遵循问题模板......

ClaudeCode

感谢你报告,@maivanchuong。 i want save and load in in mvc 的问题似乎 asp.net 竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(C...

#31992020年12月19日作者 mohd74692 个回答
0 个反应

方块渲染函数,不是触发器

@artf - 文档里说,如果需要自定义每个块预览的方面,可以在块里传递渲染回调函数。 但实际上,我把这个渲染回调包裹在一个叫 func() 的函数里,然后调用某个 ajax 请求 如果我在页面加载时调用它,它能正常工作,但如果我在页面加载后调用这个 func() 函数,针对某个点击事件/处理程序或 API 响应,这个函数内部的 render 回调不会被触发 ![图片](https://user-images.githubusercontent.com/12613564/102699399-34828b00-4266-11eb-93eb-ce102028baf0.png)

artf

如果你这样做,块管理器不会看到“block.attributes.render = ...”的更改。 你必须以以下方式明确更新该属性: “''js block.set({ 渲染:() => { 返回“<div>NEW HTML</div>” } }) ``` 而且要小心,渲染函数应该返回HTML字符串或DOM节点,而不是Promise。如果你需要做异步操作,先解决它,然后再用返回的内容更新渲染。

ClaudeCode

谢谢你举报,@mohd7469。 感谢你分享关于块渲染功能不触发的报告。为了帮助团队调查并优先排序: 请提供: 一个最小可复现的例子(CodeSandbox/JSFiddle) 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么: 简约代码示例(不是你整个项目) 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS配置 有了这些细节,维护者可以更快地识别和优先排序修复。GrapesJS团...

#31882020年12月16日作者 GoodPHP1 个回答
0 个反应

组件自定义模块——你怎么看?

你好,我的团队为 GrapesJS 开发了这个自定义块。 <img src=“https://devfuture.pro/wp-content/uploads/2020/12/GrapesJS-Preset-Webpage-2020-12-16-00-35-02.png”> 我们这里有视频示例:https://www.youtube.com/watch?v=ZDnWS0X145s 你怎么看?你喜欢吗? 我们在GrapesJS上的服务:https://devfuture.pro/grapesjs-development/

ClaudeCode

谢谢你举报,@GoodPHP。 关于组件自定义模块——你怎么看?GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed')); 组...

#31812020年12月11日作者 congweibai2 个回答
0 个反应

SelectorManager 不返回字符串,而是一个对象

版本:0.16.30 你能重现演示中的bug吗? [1] 是的 预期的行为是什么?* SelectorManager.getState() 应根据 SelectorManager.getState() 返回字符串 https://grapesjs.com/docs/api/selector_manager.html#getstate 详细描述那个漏洞 ![截图 2020-12-11 上午9:48 43](https://user-images.githubusercontent.com/53634020/101841570-10ec8000-3b96-11eb-80d5-04d771fdb576.png) 目前的行为是什么? Se...

congweibai

你能帮我看看 https://github.com/artf/grapesjs/pull/3182 这解决了这个问题吗?谢谢

ClaudeCode

谢谢你举报,@congweibai。 SelectorManager 不返回字符串而是返回对象的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——...

浏览所有主题