将所见即所得编辑器中的内容复制到 textarea

Question

我尝试将内容从 WYSIWYG 编辑器（所见即所得）复制到文本区域，并且需要对其进行结构化。 我正在使用 Quill https://www.quilljs.com/docs/quickstart

我添加了一个 textarea，将编辑器中的内容粘贴到其中，单击按钮Edit HTML 。

$("#editHTML").click(function() {
   var content = $("#editor .ql-editor").html();
   $("#htmlEditForm").html(content);
});

它有效，但正如您所见，它根本没有结构化。 一切都在一行中：

我需要这样：

<p>FOO</p>
<p>BAR</p>
<p class="ql-align-center"><span style="color: rgb(230, 0, 0);">I am centered</span></p>

我需要将它放在 textarea 中，因为我想将它用作 HTML 编辑器。 稍后我将添加另一个按钮，将 html 代码粘贴回 WYSIWYG 编辑器。

目标是让高级用户可以编辑 HTML。

我不确定如何做到这一点，我想用这个替换任何结束标记：例如</p> -> </p>\\n但它只是在 textarea 中输出</p>\\n而不是创建一条新线。

这甚至可能吗？

更新：

我尝试按照建议使用getContents ：

var toolbarOptions = [
  ['image'],
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
  [{ 'align': [] }],
  ['blockquote', 'code-block'],


  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
  [{ 'direction': 'rtl' }],                         // text direction
  [{ 'font': [ 'arial', 'Monotype Corsiva', 'fantasy', 'serif' ] }],


  ['clean']                                         // remove formatting button
];

var quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
      toolbar: toolbarOptions
  }
});

$("#editHTML").click(function() {
    $("#htmlEditForm").html(quill.getContents());
});

但 textarea 保持空白。

quill.getContents()只返回一个对象：

Answer 1

不幸的是，Quill 并不打算这样做。 Quill 使用它自己的名为Parchment的文档模型。 它跟踪编辑器中的所有更改，以便它可以理解其内容并进行更改，但它对可以添加的内容有一些限制。 例如，您不能添加与现有印迹/格式不匹配的元素。

例如，如果有人随意编辑 HTML 并添加一个 div，则编辑器的文档模型将不再与其内容匹配。 当切换回所见即所得视图时，某些功能将无法工作，直到它尝试重新创建其文档模型并弄乱 HTML 视图中所做的更改。

编辑

此外，对于如何使用新行和缩进格式化 HTML 的原始问题，您所看到的是它的格式化方式。 编辑器不会像编写代码时那样为每个块元素换行或添加缩进以进行嵌套。

如果您希望以某种方式对其进行格式化，则必须手动进行。 通过解析getContents()输出或通过编写或查找可以格式化 HTML 的脚本。

Answer 2

您可以将文本区域与允许代码编辑功能的 Ace 编辑器 ( https://ace.c9.io/ ) 结合使用。

Answer 3

不是检测 .click 事件，而是使用内置的 quill 机制“text-change”……也可以一次性获取富文本编辑器的 HTML，使用 .container.childNodes[0].innerHTML

quill.on('text-change', function (delta, oldDelta, source) {
  // your code here e.g.
  $("#htmlEditForm").html(quill.container.childNodes[0].innerHTML);
});

Answer 4

文本区域无法显示富文本编辑器的格式。 如果您不希望文本区域中的标签，一个简单的解决方案可以是去除所有标签。 或者，如果您想要粗体、斜体等标签，则必须使用 WYSIWYG 编辑器。 您可以禁用编辑器的所有工具，它看起来像一个文本区域。