我将初始状态传递给quill编辑器是这样的
<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>
有什么方法可以阻止Quill分解最初通过的html吗??
您提到当调用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>
);
}
从这个答案,这篇文章由Quill的作者之一,和一些帖子的令人愤慨的数量不喜欢这个问题有:我们可以了解到,Quill并不真正支持任意超文本标记语言
因此,你在你的问题中提到的要求将变得更加复杂,如果你试图强迫它在Quill,即使它听起来很微不足道。
归根结底,Quill只是开发人员可以用来提供解决方案的众多工具之一。话虽如此,如果您必须使用任意超文本语言标记,我建议您考虑使用内容可编辑元素。
如果你真的必须使用Quill,我认为一个解决方案是如果超文本标记语言
来自另一个数据源,因为你将无法依赖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} />
</>
);
}