React-quill разбивает изначально переданные завернутые элементы на отдельные элементы
Я передаю начальное состояние редактору 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??
0 ответов
Из этого ответа, этого сообщения одного из авторов Quill и возмутительного количества антипатий к некоторым сообщениям, которые вызывает этот вопрос: мы можем узнать, что Quill на самом деле не поддерживает произвольный
HTML
поэтому требование, которое вы упомянули в своем вопросе, станет более сложным, если вы попытаетесь принудительно применить его к Quill, даже если это звучит очень тривиально.
В конце концов, Quill - лишь один из многих инструментов, которые разработчики могут использовать для предоставления решений. С учетом сказанного, я предлагаю вам изучить использование
contentEditable
элементы, если вы должны использовать произвольный HTML.
Если вам действительно нужно использовать Quill, я думаю, что одно из решений этого - если
HTML
поступает из другого источника данных, поскольку вы не сможете полагаться на данные, возвращаемые Quill's
onChange
или даже фактический
innerHTML
содержимого WYSIWYG.
export default function App() {
const [text, setText] = React.useState(html);
return (
<>
<textarea value={text} onChange={(e)=>setText(e.target.value)}/>
<ReactQuill value={text} />
</>
);
}
Вы упомянули, что когда
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>
);
}