1

我正在尝试在 MaterializeCSS 页面上使用 Trix WYSIWYG 编辑器。不幸的是，格式化不起作用，因为 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？

4

1 回答 1

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/

于 2018-01-17T11:26:47.980 回答