javascript - Tinymce 编辑器中不显示图标

Question

我尝试使用 tinymce 制作可编辑的自定义样式列表。列表项以 Material-Check-Icons 作为要点。我将检查图标添加为 css-pseudo-elements ::before。这工作正常，但如果我将 tinymce (v5) 添加到列表中以使其可编辑，图标就会消失。我如何在 tinymce 内容中显示列表图标？...我已经尝试将 material-icon-library 添加到 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 {
  content: "\e5ca";
  font-family: Material Icons;
  }

链接到 GitHub 存储库中的代码点:GitHub repository

不知道你是否明白我的意思。