使用GrapesJs编辑在<textarea> 中的HTML。

Question

我想为一个HTML片段提供一个可视化的编辑器，目前正在使用一个简单的 <textarea> 领域。

我正在尝试着学习GrapesJs来实现这个功能，但我无法掌握这个概念。据我了解，GrapesJs是通过渲染到指定的 <div>，可能采取相同的 <div> 内容作为它的初始模板进行编辑，然后我猜它会修改DOM或将其工作存储在浏览器存储中。

如果我的理解是正确的，我仍然不能得到如何改变这种行为来处理我的 <textarea> 的情况。我需要小编把 <textarea> 内容作为它的初始模板，并最终将修改后的HTML片段以文本（? 所以我们不需要在任何地方存储我们的DOM，也不需要将HTML发送到服务器上。这种形式 <textarea> 是会负责把它放到后台。

这也让我很疑惑，GrapesJs如何与表单上的 <textarea> 被放置，它可能有自己的样式和代码。

而Grapes会对被编辑页面的样式和javascripts做什么处理呢？它们会不会是GrapesJs会产生的那部分文字呢？...

我将感谢一个小的代码示例，它将打开一个GrapesJs可视化编辑器，它将采取并存储它的工作从一个 <textarea>

我可以创建两个 <textarea>如果是不可避免的html和样式，则可以用它来代替。

(对于我的知识水平来说，我觉得文档在编辑器本身和我们编辑的页面的逻辑分离方面很混乱，我目前还没能搞清楚文档中的这些概念)

Answer 1

更新

我想在这种情况下，你可以挂到 component 事件，如add、update、remove来更新你的textareas。

在下面的例子中，我是这样做的 编码笔

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;