MaterializeCSS和Trix格式设置

Question

我正在尝试在MaterializeCSS页面上使用Trix所见即所得编辑器。不幸的是，格式化不起作用，因为MaterializeCSS用"line-style-type: none“这样的样式覆盖了像UL这样的超文本标记语言元素。它确实提供了一个样式".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编辑器中使用合适的风格来渲染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/