React-Quill无法保留原始HTML标签致布局错乱，如何解决？

编辑说明：我们已将Quill替换为TinyMCE，所有问题均已解决。可直接将HTML响应原样插入TinyMCE状态并进行修改！

我们正在开发一款邮件模板应用，支持用户创建/修改模板，同时提供预设模板，目前遇到了样式错乱的问题，具体情况如下：

问题详情 #

1. 初始邮件模板的原始HTML代码：

<html>
  <head>
    <title>FINROTA</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="font-family: Verdana, Geneva, Tahoma, sans-serif">
    <table width="670" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td bgcolor="#FFFFFF">
          <table bgcolor="#FFFFFF" width="575" align="center" border="0" cellpadding="0" cellspacing="0">
            <!-- Header -->
            <tr>
              <td bgcolor="#FFFFFF">
                <table width="575" align="center" border="0" cellpadding="0" cellspacing="0" style="border-bottom: 1px solid #F3F3F3;">
                  <tr>
                    <td style="height: 94px;text-align: center;">
                      <a href="https://portal.finrota.com/">
                        <img width="120" height="30" style=" display: initial;padding-top: 20px;" src="https://cdnecozum.com/static/images/mailing/header.png" alt="finrota-logo" />
                      </a>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <!-- /Header -->
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

2. 我们将上述HTML传入React-Quill组件作为初始值，组件代码如下：

import { textEditorOptions } from "lib/constants";
import React, { forwardRef, useImperativeHandle, useRef } from "react";
import ReactQuill from "react-quill";

const editorOptions = {
    toolbar: false,
    clipboard: {
      matchVisual: false
    }
  },

  TemplateEditor = forwardRef(({ formParamForQuill, setFormParamForQuill, shouldHideToolbar, data, stateData, update, communicationType }, ref) => {

    const [quillState, setQuillState] = React.useState({ description: data || "" }),
      editorRef = useRef(),

      handleQuillChange = val => {

        setQuillState(() => ({ description: val }));
        update(`${communicationType}`, { ...stateData[`${communicationType}`], body: val });

      };

    useImperativeHandle(ref, () => ({ editorRef }));

    React.useEffect(() => {

      if (formParamForQuill.token !== null && formParamForQuill.explanation !== null)
        setFormParamForQuill({ token: null, explanation: null, ref: null });

    }, [formParamForQuill]);

    return (
      <>
        <div className="communication-template-quill">
          <ReactQuill
            ref={editorRef}
            modules={!shouldHideToolbar ? textEditorOptions : editorOptions}
            value={typeof quillState.description === "string" ? quillState.description : quillState.description.join("")}
            onChange={value => handleQuillChange(value)}
          />
        </div>
      </>
    );
  });

export default TemplateEditor;

3. 问题表现：
   传入的原始HTML被React-Quill修改为以下内容，原始的表格布局完全丢失，导致样式错乱：

<p>FINROTA <a href="https://**.**.com/" rel="noopener noreferrer" target="_blank">
    <img src="https://*****.com/-/-/-/-.png" alt="finrota-logo" height="30" width="120">
  </a>
  <img src="https://*****.com/static/images/mailing/pay.png" alt="top-images" height="128" width="123"> Sayın <strong style="color: rgb(16, 16, 16);">{{-}},</strong>
</p>
<p>---</p>
<p>---</p>
<p>
  <strong>** ** **</strong> Sistem Destek E-Mail: <strong> **@**.com </strong> Telefon: <strong> 0(**) ** ** 00 </strong> Fax: <strong> 0(**) ** ** 00 </strong>
  <a href="https://twitter.com/*****/" rel="noopener noreferrer" target="_blank">
    <img src="https://******.com/static/images/mailing/twitter.png" alt="twitter" height="32" width="32">
  </a>
  <a href="https://www.linkedin.com/company/*****/mycompany/" rel="noopener noreferrer" target="_blank">
    <img src="https://*****.com/static/images/mailing/linkedin.png" alt="linkedin" height="32" width="32">
  </a>
  <a href="https://www.facebook.com/*****/" rel="noopener noreferrer" target="_blank">
    <img src="https://*****.com/static/images/mailing/facebook.png" alt="facebook" height="32" width="32">
  </a>
  <a href="https://www.instagram.com/EcozumAS/" rel="noopener noreferrer" target="_blank">
    <img src="https://*****.com/static/images/mailing/instagram.png" alt="instagram" height="32" width="32">
  </a>
</p>

解决方法 #

将React-Quill替换为TinyMCE编辑器，TinyMCE支持直接保留原始HTML结构，无需额外配置即可将完整的HTML响应插入编辑器状态并进行修改，完美解决了样式错乱问题。

内容的提问来源于stack exchange，提问作者emre-ozgun