将内容从WYSIWYG编辑器复制到textarea

Question

我尝试将内容从WYSIWYG-Editor（你看到的是你得到的）复制到textarea，并且需要进行结构化。我正在使用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> - ＆gt; </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 Editor（https://ace.c9.io/）结合使用，以便进行代码编辑功能。

Answer 3

使用内置的 quill 机制 'text-change' 代替检测 .click 事件......还可以一次性获取富文本编辑器的 HTML，使用 .container.childNodes[0].innerHTML

self.tabBar.barStyle = .blackOpaque

Answer 4

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