使用 GrapesJs 编辑 <textarea> 中的 HTML

Question

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

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

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

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

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

我会欣赏一个小代码示例，它将打开一个 GrapesJs 可视化编辑器，该编辑器将获取并存储其工作 to/from <textarea>

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

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

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;

使用 GrapesJs 编辑 <textarea> 中的 HTML

Edit HTML that is in a <textarea> using GrapesJs

javascript

grapesjs

已更新