Question

我试图在MaterialiseCSS页面上使用Trix WYSIWYG编辑器。遗憾的是格式化不起作用，因为MaterialiseCSS用类似＆＃34; line-style-type：none＆＃34;等样式覆盖像UL这样的HTML元素。它确实提供了一种风格＆＃34;。浏览器默认＆＃34;重置这个，但由于内容区域中的HTML元素是动态创建的，我无法真正使用它。

这是一个示例代码段：

/group/feed

有谁知道如何使这个工作并以适当的风格在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/

MaterialiseCSS和Trix格式

1 个答案: