Tinymce 编辑器中不显示图标

Question

我尝试使用 tinymce 制作可编辑的自定义样式列表。列表项具有 Material-Check-Icons 作为要点。我将复选图标添加为 css-pseudo-elements ::before。这很好用，但如果我将 tinymce (v5) 添加到列表中以使其可编辑，图标就会消失。如何在 tinymce 内容中显示列表图标？...我已经尝试将材料图标库添加到 content_css。

<div id="editable">

  <ul>

    <li>item 1</li>

    <li>item 2</li>

    <li>item 3</li>

  </ul>

</div>

tinymce.init({

  selector: '#editable',

  inline: true,

  content_css: ['https://fonts.googleapis.com/icon?family=Material+Icons']

})

#editable ul{

  padding-left: 0;

  list-style-type: none;

}

#editable ul>li {

  padding-left: 25px;

  margin-top: 10px;

  position: relative;

}

#editable ul>li:before {

  content: "check";

  font-family: Material Icons;

  position: absolute;

  left: 0;

  top: -2px;

  font-size: 17px;

  color: #3770d6;

}

在这里我做了一个codepen。

Answer 1

我认为 CSS 内容可能存在问题：“”。但这是我对你所做的修复，你可以用 unicode 完成它。.custom-list>li:before {&nbsp; content: "\e5ca";&nbsp; font-family: Material Icons;&nbsp; }链接到 GitHub 存储库中的代码点：GitHub 存储库我不知道你是否明白我的意思。