如何防止ckeditor5剥离自定义类、样式和注释？

Question

我们正在研究一个涉及在 DataTables 编辑器中启用所见即所得编辑器的项目。

DTE 有 CKE、TinyMCE 和我认为是 Quill 的插件。 CKEditor5 在 DTE 中工作，但是当你去编辑内容时，我们无法得到我们需要的东西。示例 - 这是我们使用源代码复制的代码：

<!-- Section -->
<section id="faq" class="faq section-bg">
  <div class="container" data-aos="fade-up">
    <div class="faq-list">
      <ul>

        <li data-aos="fade-up" data-aos="fade-up" data-aos-delay="100">
          <i class="bx bx-help-circle icon-help"></i> <a data-bs-toggle="collapse" class="collapse" data-bs-target="#faq-list-1">Non consectetur a erat nam at lectus urna duis? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
          <div id="faq-list-1" class="collapse show" data-bs-parent=".faq-list">
            <p>
              Feugiat pretium nibh ipsum consequat. Tempus iaculis urna id volutpat lacus laoreet non curabitur gravida. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non.
            </p>
          </div>
        </li>

        <li data-aos="fade-up" data-aos-delay="200">
          <i class="bx bx-help-circle icon-help"></i> <a data-bs-toggle="collapse" data-bs-target="#faq-list-2" class="collapsed">Feugiat scelerisque varius morbi enim nunc? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
          <div id="faq-list-2" class="collapse" data-bs-parent=".faq-list">
            <p>
              Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Id interdum velit laoreet id donec ultrices. Fringilla phasellus faucibus scelerisque eleifend donec pretium. Est pellentesque elit ullamcorper dignissim. Mauris ultrices eros in cursus turpis massa tincidunt dui.
            </p>
          </div>
        </li>

        <li data-aos="fade-up" data-aos-delay="300">
          <i class="bx bx-help-circle icon-help"></i> <a data-bs-toggle="collapse" data-bs-target="#faq-list-3" class="collapsed">Dolor sit amet consectetur adipiscing elit? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
          <div id="faq-list-3" class="collapse" data-bs-parent=".faq-list">
            <p>
              Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Faucibus pulvinar elementum integer enim. Sem nulla pharetra diam sit amet nisl suscipit. Rutrum tellus pellentesque eu tincidunt. Lectus urna duis convallis convallis tellus. Urna molestie at elementum eu facilisis sed odio morbi quis
            </p>
          </div>
        </li>

      </ul>
    </div>
  </div>
</section><!-- Section -->

在我切换回格式化视图后，它会删除类、注释、数据等。我们需要它不要这样做，这样非技术人员就可以在启用格式化编辑器的情况下编辑文本。以下是切换到格式编辑器视图后看到的内容：

<ul>
    <li class="faq section-bg" id="faq">
        <a class="collapse" data-bs-toggle="collapse" data-bs-target="#faq-list-1">Non consectetur a erat nam at lectus urna duis?&nbsp;</a>
    </li>
</ul>
<p class="faq section-bg" id="faq">
    Feugiat pretium nibh ipsum consequat. Tempus iaculis urna id volutpat lacus laoreet non curabitur gravida. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non.
</p>
<ul>
    <li class="faq section-bg" id="faq">
        <a class="collapsed" data-bs-toggle="collapse" data-bs-target="#faq-list-2">Feugiat scelerisque varius morbi enim nunc?&nbsp;</a>
    </li>
</ul>
<p class="faq section-bg" id="faq">
    Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Id interdum velit laoreet id donec ultrices. Fringilla phasellus faucibus scelerisque eleifend donec pretium. Est pellentesque elit ullamcorper dignissim. Mauris ultrices eros in cursus turpis massa tincidunt dui.
</p>
<ul>
    <li class="faq section-bg" id="faq">
        <a class="collapsed" data-bs-toggle="collapse" data-bs-target="#faq-list-3">Dolor sit amet consectetur adipiscing elit?&nbsp;</a>
    </li>
</ul>

我查看了插件列表并找到了 HTMLembed，但我认为这并不能解决需求。如果不是 ckeditor5，是否有一个开源编辑器可以在 DTE 中使用来满足这种需求 - 或者 - 我们如何定制它以使其工作？