reactjs - react-quill 将最初传递的包装元素分解为单独的元素

Question

我将初始状态传递给羽毛笔编辑器是这样的

<blockquote class="quote-aufjd">
      <div>
        On Wednesday, September 2nd 2020 <a rel="noopener noreferrer" href="mailto:mail">mail</a> wrote: <br>
        <div>This is my reply</div>
        </div>
</blockquote>

但是当调用onChange处理程序时，它会破坏上面传递的 html 到

<blockquote>On Wednesday, September 2nd 2020 
<a href="mailto:nikhil.ponduri@gmail.com" rel="noopener noreferrer" target="_blank">mail</a> wrote:</blockquote>
<blockquote>ok</blockquote>
<blockquote><br></blockquote>

有什么办法可以阻止最初通过 html 的羽毛笔分解？

Answer 1

你提到当onChange被调用时你得到一个错误，但你没有在你的问题中发布该函数的代码！无论如何，我试图回答并无法重现该问题。以下代码对我来说很好，让我知道，

import React from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import "./styles.css";

const html = `
  <blockquote class="quote-aufjd">
    <div>
        On Wednesday, September 2nd 2020
        <a rel="noopener noreferrer" href="mailto:mail">mail</a>
        wrote:
        <br>
        <div>This is my reply</div>
    </div>
  </blockquote>
`;

export default function App() {
  const [text, setText] = React.useState(html);

  return (
    <div className="App">
      <h1>Quill Editor</h1>
      <ReactQuill value={text} onChange={setText} />
    </div>
  );
}

Answer 2

从这个答案， Quill 的一位作者的这篇文章，以及这个问题的一些帖子的不喜欢的数量惊人：我们可以了解到，Quill 并不真正支持任意HTML，因此，您在问题中提到的要求将变得更加复杂如果你试图把它强加在 Quill 上，即使它听起来很微不足道。

归根结底，Quill 只是开发人员可以用来提供解决方案的众多工具之一。contentEditable话虽如此，如果您必须使用任意 HTML ，我建议您考虑使用元素。

---

如果你真的必须使用 Quill，我认为一个解决方案HTML是来自另一个数据源，因为你将无法依赖 Quill 返回的数据，onChange甚至是innerHTML所见即所得内容的实际值。

export default function App() {
  const [text, setText] = React.useState(html);

  return (
    <>
      <textarea value={text} onChange={(e)=>setText(e.target.value)}/>
      <ReactQuill value={text} />
    </>
  );
}