PageKit — 可自托管的 GrapesJS 建站工具,附完整源码。 获取抢先体验

问题 #6064💬 已回答提出于 2024年8月18日作者 mannyyang0 个反应

在程序中设置文本内容会在画布中清除

快速解答作者 danstarns

试试用“.getEl”方法在组件上,然后直接设置元素。 “''js const editor = Grapesjs.init({ 容器:“#gjs”, fromElement: 1, 身高:“100%”, storageManager: { type: 0 }, 插件:['GJS-Blocks-BASIC'] }); setTimeout(() => { const component = editor.getWrapper().find('.test-text')[0] const el = component.getEl(); el.textContent = “测试” }, 1000) ```

阅读下方完整回答 ↓

问题

GrapesJS 版本

  • 我确认使用最新版本 GrapesJS

你用的是什么浏览器?

V126

可复制演示链接

https://jsfiddle.net/r5062suy/1/

描述一下那个虫子

如何复现这个漏洞?

  1. 运行演示链接(https://jsfiddle.net/r5062suy/1/)
  2. 看我尝试将div中的文本从“Hello world!!”改为通过 editor.getWrapper().find('.test-text')[0].set('content', 'test')测试。
  3. 但它实际上是清除文本。

预期的行为是什么? 它会正确更新文本内容。

目前的行为是什么? 而是把它清理干净。

行为准则

  • 我同意遵守本项目的行为准则

回答(4)

danstarns• 2024年8月18日

试试用“.getEl”方法在组件上,然后直接设置元素。 “''js const editor = Grapesjs.init({ 容器:“#gjs”, fromElement: 1, 身高:“100%”, storageManager: { type: 0 }, 插件:['GJS-Blocks-BASIC'] }); setTimeout(() => { const component = editor.getWrapper().find('.test-text')[0] const el = component.getEl(); el.textContent = “测试” }, 1000)...

mannyyang• 2024年8月18日

“''jsconst component = editor.getWrapper().find('.test-text')[0]const el = component.getEl();el.textContent = “测试”

artf• 2024年8月21日

@mannyyang你是从哪里找到“set('content', ...')的用法的?它更像是私人财产,你绝不应该使用它。

要程序化地更新内部组件,请使用 'component.components('test')'

GJS Helper• 2026年5月17日

你遇到的问题源于GrapesJS对组件属性处理方式的普遍误解,特别是文本组件中content属性和 text属性的区别。 根本原因 在GrapesJS中,组件的 content 属性通常用于定义或替换其内部 HTML 结构,该结构可能包含其他嵌套的GrapesJS组件。当你调用组件上的 set('content', 'test') 时,GrapesJS 尝试解析 'test' 作为潜在的子组件或 HTML 结构。对于设计用于存储纯文本的 text 组件,用简单的字符串如 'test' 设置其 content 属性并不能正确更新其文本值。相反,它实际上清除了所有现有的子节点(即文本节点本身),...

相关问答

通过相似的问题讨论继续研究。

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

相关教程

关于同一主题的深入指南。

全部教程 →

浏览插件分类

直接跳转到市场上的插件分类页面。