#34802021年5月25日作者 samichamoun4 个回答
我注意到如果我在初始化函数中设置高度,它会根据特定的像素数量来设置,比如“500px”。但是如果你尝试用百分比设置,比如高度:“90%”,编辑器根本没有高度。 另外我也想知道,如果什么都没设置,为什么设置了高度,因为它似乎自动计算了一个像素数量,占用了整个页面(比如100%)。 我实际上把编辑器包裹在我们CMS后台的标准页面模板里,这个页面模板在侧边菜单栏里有更多内容,迫使页面变成可滚动页面(也就是页面模板的内容总是在屏幕折叠下方)。这让编辑器功能非常差,因为如果你想在编辑器下方滚动,就必须把光标移出编辑器并滚动,这会导致用户体验很差。 我还有一个“保存”按钮,可以提交到表单,但这不属于编辑器,所以要进入保存按钮,你得再次把光标移...
ahmedderkaoui
尽量用'VH'代替'PX'。 例如:给编辑器“height: '80vh'',给导航栏'height: '20vh'''。这样,只要所有元素的“vh”之和≤100,纵向滚动就永远不会显示或需要 希望这些信息对你有帮助。
samichamoun
尝试用“VH”代替“px”。例如:给编辑器“height: '80vh'',你的导航栏'height: '20vh''。这样,只要所有元素的“vh”之和≤100,纵向滚动就永远不会显示或需要希望这些对你有帮助。 谢谢,这很有用!
artf
这更多是布局问题,与GrapesJS编辑器本身无关。
#34752021年5月24日作者 ThetripGr2 个回答
版本: 0.16.44 你可以在控制台输入“grapesjs.version”获得版本 你能重现演示中的bug吗?[x] 是的[ ] 不 预期的行为是什么? 每个实例都有自己的工具栏正常工作 详细描述那个漏洞 之前我又提出了一个关于实例#3354的问题,在这个问题中,我认为是我处理实例不当导致了问题。我甚至在演示页面里也遇到了这个 https://grapesjs.com/docs/getting-started.html#theming。你可以看到,在每一个实例中,工具栏都无法使用,提供的选项(加粗、删除线、链接等)都没有,只有最后一个启动的实例例外。我的情况也是这样(工具栏只在最后一个启动的实例上工作)。 你能附上截图、截屏或...
artf
谢谢你的报告@DodoTrip 修复已经准备好,准备下一次版本。
ClaudeCode
谢谢你举报,@ThetripGr。 工具栏/动作栏按钮在多个实例存在时无法工作(即使在你的演示中)似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这...
#34722021年5月24日作者 YyueeiWY2 个回答
版本: “Grapesjs”: “^0.17.3” “Grapesjs-preset-webpage”: “^0.1.11” 你可以在控制台输入“grapesjs.version”获得版本 你能重现演示中的bug吗?[x] 是的[ ] 不 目前的行为是什么? css 属性(-webkit-background-clip:text;)在 grapesjs-preset-webpage(导入时消失)中无法使用。 但在Grapesjs官方演示中它能用。 https://grapesjs.com/demo.html GrapesJs 的官方演示源和插件 grapesjs-preset-webpage 有区别吗? 详细描述那个漏洞 我正在尝...
YyueeiWY
好的,我用 **grapesjs-parser-postcss 来解决的 我不知道有CSS解析器插件。 https://github.com/artf/grapesjs-parser-postcss
ClaudeCode
谢谢你举报,@YyueeiWY。 CSS 属性(-webkit-background-clip:text;)在 grapesjs-preset-webpage 中无法使用。 似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的...
#34702021年5月22日作者 iabhiyaan1 个回答
警告 请阅读并遵循接下来的三步,然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下,看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答,否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 版本: 你可以在控制台输入“grapesjs.version”获得版本 你能重现演示中的bug吗?[ ] 是的[x] 不 预期的行为是什么? 详细描述那个漏洞...
ClaudeCode
谢谢你举报,@iabhiyaan。 问题:当选中组件时,我们如何激活右上角面板的特性管理器似乎是竞争条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于...
#34652021年5月19日作者 anatoli-dp3 个回答
警告 请阅读并遵循接下来的三步,然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下,看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答,否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 版本: 最近一次是直接从 GitHub 克隆的 你可以在控制台输入“grapesjs.version”获得版本 你能重现演示中的bug吗?[ ] 是的[x ]...
artf
其实正确的 API 应该是 '.components('html string')',看起来工作正常,但我会去研究重置,因为我预计工作方式也是一样的
artf
看起来 Backbone 的重置方法注入了“静默”选项,阻止 CSS 集合渲染新增样式,所以目前我更倾向于避免设置错误条件来移除这个选项,建议坚持使用正确的 API
ClaudeCode
谢谢你举报,@anatoli-DP。 更新会破坏CSS的一些东西的问题似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于团队更快识别根本原因...
#34632021年5月18日作者 anatoli-dp4 个回答
警告 请阅读并遵循接下来的三步,然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下,看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答,否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 版本: 你可以在控制台输入“grapesjs.version”获得版本 你能重现演示中的bug吗?[ x] 是的[ ] 不 预期的行为是什么? 当将任何东西堆叠...
anatoli-dp
也许可以把控件放在文本前面,然后对每个缩进或叠加的项目稍微偏移整个框。这样你可以随意堆叠,我🤷最终会自己做解决方案来实现,但因为我不懂你的代码结构,帮不上太多忙。但如果默认是这样就更好了
artf
是的,不幸的是,默认图层面板的可扩展性不高,我们需要重新考虑渲染方式
artf
是的,把控件移到文本前面听起来很合理(比如只在我把鼠标悬停在组件时才显示)。 总之,虽然结构不那么混乱,我不会把这个问题放在优先级上,但如果能解决这种限制肯定很酷。 如果有人需要帮助,这里可以查看图层管理器的视图:https://github.com/artf/grapesjs/blob/dev/src/navigator/view/ItemView.js
#34622021年5月18日作者 ahmedderkaoui3 个回答
有没有办法重新渲染或刷新画布中所有组件的特性(这些特征是自定义的,不是内置的)?
iabhiyaan
“''js editor.on('component:selected', component => { component.set({ 特质:['名字','占位符'] }) }) ````
artf
嗯,这有什么意义?你的自定义特征应该已经能对组件变化做出反应(前提是你正确创建了它们)。
ClaudeCode
谢谢你举报,@ahmedderkaoui。 关于刷新/重新渲染所有组件在画布中特性的好问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something...
#34612021年5月17日作者 ahmedderkaoui1 个回答
我知道有一个函数可以重新渲染一个特征的视图。 不过,我仍然不知道该怎么用,也不知道该在哪里使用。
ClaudeCode
谢谢你举报,@ahmedderkaoui。 关于在选定组件上重新渲染特性的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed'));...
#34592021年5月16日作者 anlumo2 个回答
版本: 0.17.3 预期的行为是什么? 文档说我可以通过以下配置配置来配置包装器元素: https://github.com/artf/grapesjs/blob/0027dcd1194715eeaf4b24db878dd7ebac069cc4/src/dom_components/config/config.js#L6-L24 详细描述那个漏洞** 我觉得这种配置在其他地方都没被用过。在项目中搜索“wrapperName”,只显示我上面链接的地方。遗憾的是,由于大量误报,搜索“包装器”不可行。 我能在初始化后用 'editor.getWrapper()' 返回的对象配置包装器元素。
artf
是的,实际上名称默认是通过 [i18N](https://github.com/artf/grapesjs/blob/d00ccb945c610bf748b2ed36e4b2fddc1c40b5ba/src/i18n/locale/en.js#L23) 配置管理的。 从0.17.*版本开始,甚至“包装器”选项也不再必要,因为你应该像扩展其他组件一样扩展“包裹器”组件(在之前版本中,“包装器”是在插件出现之前初始化的)。 我会在下一次发布👍时移除它们
ClaudeCode
谢谢你举报,@anlumo。 DomComponents' 配置错误的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于团队更快识别根本原...
#34582021年5月16日作者 divesham1 个回答
警告 请阅读并遵循接下来的三步,然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下,看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答,否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 你想给GrapesJS添加什么? 详细描述你的功能需求详细 最新版本有替代方案吗?[x] 是的(描述替代方案)[ ] 不 这是否与某个问题有关?[ ] 是的(请...
ClaudeCode
谢谢你举报,@divesham。 关于特技:添加自定义块(即iframe)并像图片一样自定义,比如双击后打开自定义素材选项,在自定义iframe块中链接视频,这真是太棒了!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改...