使用 GrapesJs 编辑 <textarea> 中的 HTML

Question

我想为当前使用简单的<textarea> 字段编辑的 HTML sn-p 提供可视化编辑器。

我正在尝试学习 GrapesJs 来实现这一目标，但我无法掌握这个想法。据我了解，GrapesJs 被渲染为指定的<div>，可能采用与要编辑的初始模板相同的<div> 内容，然后我猜它会修改 DOM 或将其工作存储在浏览器存储中。

如果我理解正确，我仍然不知道如何改变这种行为来处理我的<textarea> 情况。我需要编辑器将<textarea> 内容作为其初始模板，并最终将修改后的 HTML sn-p 作为文本 (?) 放回其中。所以我们不需要将我们的 DOM 存储在任何地方或将 HTML 发送到服务器。此<textarea> 所在的表单将负责将其放到后端。

这也让我想知道 GrapesJs 是如何与放置<textarea> 的表单分开的，它可能有自己的样式和代码。

Grapes 会对正在编辑的页面的样式和 JavaScript 做什么？它们会成为 GrapesJs 生成的文本的一部分吗？...

我将欣赏一个小的代码示例，它将打开一个 GrapesJs 可视化编辑器，该编辑器将接收和存储其工作到/来自 <textarea>

如果不能避免的话，我可以为 html 和样式创建两个 <textarea>s

（在编辑器本身和我们正在编辑的页面的逻辑分离方面，我发现文档对我的知识水平感到困惑，我目前无法理解文档中的这些概念）

Answer 1

更新

我认为在这种情况下，您可以挂钩 component 事件，例如添加、更新、删除以更新您的文本区域。

在下面的示例中，我正在这样做Codepen

const editor = grapesjs.init({
            height: '100%',
            container: '#gjs',
            showOffsets: true,
            fromElement: true,
            noticeOnUnload: false,
            storageManager: false,
            plugins: ['grapesjs-preset-webpage'],
          });
    const htmlTextarea = document.getElementById('html')
    const cssTextarea = document.getElementById('css')
    const updateTextarea = (component, editor)=>{
      const e = component.em.get("Editor");
      htmlTextarea.value= e.getHtml();
      cssTextarea.value= e.getCss();
    }
    editor.on('component:add', updateTextarea);
    editor.on('component:update', updateTextarea);
    editor.on('component:remove', updateTextarea);
    const updateInstance = () => {
      editor.setComponents(htmlTextarea.value)
      editor.setStyle(cssTextarea.value)
    }
    document.getElementById('save').onclick=updateInstance;