将Quill富文本编辑器内容结构化复制到textarea的问题

解决方案 #

首先得帮你理清两个核心问题：你之前用quill.getContents()返回的是Quill内部的Delta数据结构（一个包含内容操作的对象），不是HTML，所以直接塞到textarea里自然是空的；而用.html()获取的HTML是浏览器压缩后的单行版本，没有结构化换行。

下面是具体的解决步骤，完全满足你要的结构化HTML效果：

1. 获取并格式化结构化HTML到textarea #

我们可以用原生的DOMParser和XMLSerializer来解析并格式化HTML，生成带换行和缩进的结构化代码，同时注意textarea要用.val()而非.html()来设置内容（因为textarea是表单元素，.html()不适用）：

$("#editHTML").click(function() {
  // 1. 获取Quill编辑器的原始HTML内容
  const rawHtml = $("#editor .ql-editor").html();
  
  // 2. 解析HTML为DOM文档
  const parser = new DOMParser();
  const doc = parser.parseFromString(rawHtml, "text/html");
  
  // 3. 序列化DOM为格式化后的HTML（带换行和缩进）
  const formattedHtml = new XMLSerializer().serializeToString(doc.body);
  
  // 4. 去掉外层自动添加的<body>标签，保留内部内容
  const cleanHtml = formattedHtml.replace(/^<body>|<\/body>$/g, "").trim();
  
  // 5. 把格式化后的HTML写入textarea
  $("#htmlEditForm").val(cleanHtml);
});

运行这段代码后，textarea里的HTML就会变成你想要的结构化格式：

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

2. 把修改后的HTML放回Quill编辑器 #

针对你后续要把HTML粘贴回富文本编辑器的需求，只需要读取textarea的内容，直接设置给Quill的根元素即可：

$("#saveHTML").click(function() {
  const editedHtml = $("#htmlEditForm").val();
  // 将修改后的HTML设置回Quill编辑器
  quill.root.innerHTML = editedHtml;
});

为什么你之前的尝试没生效？ #

• 替换闭合标签加换行：textarea显示的是纯文本，你需要的是文本换行符\n，而不是HTML的<br>，手动替换容易遗漏标签，用DOM序列化的方法更可靠。
• quill.getContents()：这个方法是用来获取Quill的Delta格式数据（用于内容存储、协作编辑等场景），不是HTML，所以直接放到textarea里只会显示[object Object]，导致看起来为空。

内容的提问来源于stack exchange，提问作者Black