Question

我尝试使用tinymce编辑一个自定义样式列表。列表项具有“物料检查图标”作为项目符号点。我将checkicons添加为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

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

Tinymce编辑器中未显示图标

1 个答案: