MaterializeCSS 和 Trix 格式化

Question

我正在尝试在 MaterializeCSS 页面上使用 Trix 所见即所得编辑器。不幸的是，格式化不起作用，因为 MaterializeCSS 用 "line-style-type: none" 这样的样式覆盖了像 UL 这样的 HTML 元素。它确实提供了一种样式“.browser-default”来重置它，但是由于内容区域中的 HTML 元素是动态创建的，所以我不能真正使用它。

这是一个示例片段：

<trix-editor class="formatted_content" input="xx" contenteditable="" trix-id="1" toolbar="trix-toolbar-1">
  <ul>
    <li>Test Item</li>
  </ul>
</trix-editor>

有谁知道如何使它工作并以适当的样式在 TRIX-EDITOR 中渲染 UL 和 LI 吗？

Answer 1

您只能覆盖 <trix-editor> 标签内元素的样式。

示例：

  <style>
    trix-editor ul:not(.browser-default)>li {
      list-style-type: disc;
      display: list-item;
    }

    trix-editor ul:not(.browser-default) {
      list-style-type: disc;
      display: block;
      padding-left: 40px;
    }

  </style>

  <trix-editor class="formatted_content" input="xx" contenteditable="" trix-id="1" toolbar="trix-toolbar-1">
    <ul>
      <li>Test Item</li>
    </ul>
  </trix-editor>


<ul class="browser-default">
  <li class="browser-default">Materialize Browser Default</li>
</ul>
<ul>
  <li>Materialize</li>
</ul>

查看此 jsfiddle 的演示：

https://jsfiddle.net/1jf9m2sp/

MaterializeCSS 和 Trix 格式化

MaterializeCSS and Trix formatting

materialize

trix