reactjs - react-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>
有什么办法可以阻止最初通过 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>
);
}
推荐阅读
- python - 熊猫。DataFrame.groupby('column').sum() 将所有信息放在一列
- python - Python 3.8 Tk Tkinter ttk.Treeview Insert 不会填充并显示在框架中
- python - 在本地部署服务器
- c - 使用子进程计算未知数组
- reactjs - 反应 netlify 404 错误导航回投资组合
- prometheus - 用于 2 种不同普罗米修斯博览会的客户端库检测
- database - 在 MariaDB 服务器中设置 UTF-8 会忽略 character_set_system
- algorithm - 具有相同任务的单循环嵌套循环的时间复杂度是多少
- arrays - IF 公式仅在第一个单元格中返回错误值。嵌套在数组中
- javascript - bootstrap 5 轮播在 Blazor 中不起作用