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} />
    </>
  );
}

Отредактируйте hungry-ellis-4zc7u

Вы упомянули, что когда 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>
  );
}


Другие вопросы по тегам