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

Question

I try to copy the content from a WYSIWYG-Editor (What you see is what you get), to a textarea and It needs to be structured. I am using Quill https://www.quilljs.com/docs/quickstart

I added a textarea, the content from the Editor is pasted into it, on click at the button Edit HTML .

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

It works, but as you can see it is not structured at all. Everything is in one line:

I need it like this:

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

I need it to be in a textarea, because I want to use it as HTML editor. Later on I will add another button which pastes the html code back into the WYSIWYG-editor.

The goal is, to give advanced users the possibilty to edit the HTML.

I am not sure how I can do this, I was thinking of replacing any closing tags with this: eg </p> -> </p>\\n but it just outputs </p>\\n in the textarea instead of creating a new line.

Is this even possible?

UPDATE:

I tried to use getContents as suggested:

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());
});

But the textarea stays empty.

quill.getContents() does just return an object:

Answer 1

Unfortunately Quill is not meant to do this. Quill uses it's own document model called Parchment . It tracks everything that changes in the editor so that it can understand it's contents and make changes, but it has some limits on what can be added. For example, you can't add an element that doesn't match an existing blot/format.

If someone were to edit the HTML arbitrarily and add a div for example, the editor's document model would no longer match it's contents. When switching back to the wysiwyg view, some functions wouldn't work until it tries to recreate it's document model and messes up the changes made in the HTML view.

Edit

Also, for the original problem of how to format the HTML with new lines and indention, what your seeing is how it's formatted. The editor is not breaking to new lines for each block element or adding indentation for nesting as someone would when they're writing code.

If you want it to be formatted in some way, you'd have to do it manually. Either by parsing the getContents() output or by writing or finding a script that can format HTML.

Answer 2

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

Answer 3

Instead of detecting .click event use the built-in quill mechanism 'text-change' ... also to get the HTML of the rich text editor all in one go use .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

Text area is not capable of showing you the formats of rich text editors. A simple solution can be strip all tags if you do not want the tags in text area. Or if you want tags like bold, italic etc you have to use WYSIWYG editor. You can disable all tools of the editor and it would be looking like a textarea.