我想知道是否可以创建自定义项目符号和编号列表？
我添加了插件 advlist 并尝试了其他人在此处和此处尝试过的示例。第一个似乎允许进行一些更改。但是，我试图用自定义图像替换项目符号或数字列表的列表样式图像，但“样式”选项“listStyleImage”似乎不起作用，即使它出现在应用程序代码中。
我还尝试添加一个 css 类以查看是否可行，但“类”语句似乎也不起作用。
我已经像示例中一样设置了 init 部分，并遵循了格式文档中的选项，但是样式的类和设置“listStyleImage”似乎不起作用。
我很确定手动将类添加到 html 代码中会起作用。我只想将其设置为自定义列表，以便不必手动完成。
这甚至可能吗？
还有另一种方法可以做到这一点吗？
更新：为了暂时解决这个问题，我必须通过编辑器手动向 html 添加一个类。它可以工作，但如果有办法通过添加自定义列表来做到这一点，那就太好了。
到目前为止，我发现将子弹转换为图像的唯一方法是使用
style_formats.
添加列表后，只需标记它并应用格式。
tinymce 代码：
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l ink image | print preview media fullpage | forecolor backcolor emoticons",
image_advtab: true,
style_formats: [{
title: 'checkMark', selector: 'li',
styles: {
'list-style-image' : 'url("../images/check-mark.png" )' //your desired image
}
}],
在进行研究时偶然发现了这个问题，在同一个问题上，经过一些调试找到了一种方法来做到这一点
tinyMCE.init({...
advlist_bullet_styles: [{
title: 'image bullets',
styles: {
listStyleImage: "url('url/to/image.png')"
}
}, {
title: 'Default',
styles: {
listStyleType: '',
listStyleImage: ""
}
}, {
title: 'Circle',
styles: {
listStyleType: 'circle',
listStyleImage: ""
}
}, {
title: 'Disc',
styles: {
listStyleType: 'disc',
listStyleImage: ""
}
}, {
title: 'Square',
styles: {
listStyleType: 'square',
listStyleImage: ""
}
}],
...});
这为您提供了默认的项目符号样式以及自定义图像样式。样式数组设置 UL 元素的属性。并且您使用 advlist_number_styles 属性为号码列表设置模板。
这是具有多级编号的 ol 列表的一个很好的示例。
示例SCSS 编译为：
ol {
list-style: none;
position: relative;
padding-left: 15;
margin: 0;
}
ol {
counter-reset: level0 0;
}
ol li::before {
content: counter(level0,decimal) "";
counter-increment: level0;
position: absolute;
right: 100%;
margin-right: 15px;
text-align: right;
font-weight: bold;
font-size: 0.8em;
}
ol li:empty + {
counter-reset: level0 0;
}
ol li:empty::before {
display: none;
}
ol ol {
counter-reset: level1 ;
}
ol ol li::before {
content: counter(level0,decimal) "." counter(level1,decimal) "";
counter-increment: level1;
position: absolute;
right: 100%;
margin-right: 15px;
text-align: right;
font-weight: bold;
font-size: 0.8em;
}
ol ol li:empty + ol {
counter-reset: level1 ;
}
ol ol li:empty::before {
display: none;
}
ol ol ol {
counter-reset: level2 ;
}
ol ol ol li::before {
content: counter(level0,decimal) "." counter(level1,decimal) "." counter(level2,decimal) "";
counter-increment: level2;
position: absolute;
right: 100%;
margin-right: 15px;
text-align: right;
font-weight: bold;
font-size: 0.8em;
}
ol ol ol li:empty + ol ol {
counter-reset: level2 ;
}
ol ol ol li:empty::before {
display: none;
}
ol ol ol ol {
counter-reset: level3 ;
}
ol ol ol ol li::before {
content: counter(level0,decimal) "." counter(level1,decimal) "." counter(level2,decimal) "." counter(level3,decimal) "";
counter-increment: level3;
position: absolute;
right: 100%;
margin-right: 15px;
text-align: right;
font-weight: bold;
font-size: 0.8em;
}
ol ol ol ol li:empty + ol ol ol {
counter-reset: level3 ;
}
ol ol ol ol li:empty::before {
display: none;
}
ol ol ol ol ol {
counter-reset: level4 ;
}
ol ol ol ol ol li::before {
content: counter(level0,decimal) "." counter(level1,decimal) "." counter(level2,decimal) "." counter(level3,decimal) "." counter(level4,decimal) "";
counter-increment: level4;
position: absolute;
right: 100%;
margin-right: 15px;
text-align: right;
font-weight: bold;
font-size: 0.8em;
}
ol ol ol ol ol li:empty + ol ol ol ol {
counter-reset: level4 ;
}
ol ol ol ol ol li:empty::before {
display: none;
}
ol ol ol ol ol ol {
counter-reset: level5 ;
}
ol ol ol ol ol ol li::before {
content: counter(level0,decimal) "." counter(level1,decimal) "." counter(level2,decimal) "." counter(level3,decimal) "." counter(level4,decimal) "." counter(level5,decimal) "";
counter-increment: level5;
position: absolute;
right: 100%;
margin-right: 15px;
text-align: right;
font-weight: bold;
font-size: 0.8em;
}
ol ol ol ol ol ol li:empty + ol ol ol ol ol {
counter-reset: level5 ;
}
ol ol ol ol ol ol li:empty::before {
display: none;
}
ol ol ol ol ol ol ol {
counter-reset: level6 ;
}
ol ol ol ol ol ol ol li::before {
content: counter(level0,decimal) "." counter(level1,decimal) "." counter(level2,decimal) "." counter(level3,decimal) "." counter(level4,decimal) "." counter(level5,decimal) "." counter(level6,decimal) "";
counter-increment: level6;
position: absolute;
right: 100%;
margin-right: 15px;
text-align: right;
font-weight: bold;
font-size: 0.8em;
}
ol ol ol ol ol ol ol li:empty + ol ol ol ol ol ol {
counter-reset: level6 ;
}
ol ol ol ol ol ol ol li:empty::before {
display: none;
}
ol ol ol ol ol ol ol ol {
counter-reset: level7 ;
}
ol ol ol ol ol ol ol ol li::before {
content: counter(level0,decimal) "." counter(level1,decimal) "." counter(level2,decimal) "." counter(level3,decimal) "." counter(level4,decimal) "." counter(level5,decimal) "." counter(level6,decimal) "." counter(level7,decimal) "";
counter-increment: level7;
position: absolute;
right: 100%;
margin-right: 15px;
text-align: right;
font-weight: bold;
font-size: 0.8em;
}
ol ol ol ol ol ol ol ol li:empty + ol ol ol ol ol ol ol {
counter-reset: level7 ;
}
ol ol ol ol ol ol ol ol li:empty::before {
display: none;
}
li {
margin-top: 0.5em;
margin-bottom: 0.5em;
position: relative;
}
根据tiny-mce 文档，您只能为 advlist_bullet_styles 定义一个逗号分隔的值字符串，例如“default,circle,disc,square”。此外，您还可以定义不符合标准的值（例如箭头）：
tinySetup({
selector: "textarea",
plugins: "advlist",
advlist_bullet_styles: "default,arrow"
});
基于此设置，您不会获得类名，但您可以应用脏 css 选择器来实现样式：
ul[style="list-style-type: arrow;"] li{
list-style-type: none;
list-style-image: url(list-icon-arrow.png);
}
背景
我知道这个问题现在已经有 5 年了，但我遇到了类似的问题，但没有找到资源来帮助解决它。我也知道这很少成为问题，因为世界各地都使用一个黑色的小圆圈作为子弹（因此得名）。我在 TinyMCE 社区网站上发布了这个问题，但几天后我的帐户被锁定（什么？！）。如果有人有更好的解决方案，请告诉我。这个解决方案似乎有点太像它与 Duck Tape 结合在一起了，如果 TinyMCE 更新发生变化，这个 hack 将会丢失。
我的问题
我住在日本和我工作的公司……他们默认的“子弹”是破折号。他们全部。我不知道为什么。像这样：
通过提供 IT 服务支持业务并深入参与系统解决方案的过程：
- 了解公司之前的战略
- 研究商业利益 (ROI)
TinyMCE 不允许对列表或高级列表插件进行任何自定义，只要将 html 插入到文档中即可。如果可以的话，我会在所有不同的项目符号上设置一个类，或者更好的是，为列表类型创建一个新的项目符号类型。但据我所知，这是不可能的。（如果有人知道如何在 TinyMCE 中自定义列表而不是编辑源代码，请告诉我！）
我的修复
我将破折号设为默认值：
在站点 html 和 Tiny 编辑器中，我使用类 'order-wrapper' 围绕任何带有项目符号的东西，在编辑器中我有： body_class: 'order-wrapper',
这个 css 使任何没有 'list-style-type' 的 UL 都像项目符号列表一样缩进，并有一个类似破折号的项目符号：
.order-wrapper ul:not([style*='list-style-type']) {
list-style: none;
margin-left: 0;
padding-left: 3em;
}
.order-wrapper ul:not([style*='list-style-type']) > li:before {
display: inline-block;
content: "-";
width: 1.5em;
margin-left: -1.5em;
}
但是当粘贴 word 文档虚线项目符号时，它们会包含一个破折号，所以我最终得到： - 了解公司的先前战略
因此，为了摆脱行首的破折号，我在编辑器 init 中添加了代码，以删除行首的 - 如果它被粘贴为列表元素。（可能有更好的过滤方法，所以如果有人有更好的方法，请告诉我）：
init_instance_callback: function (editor) {
//On Paste: remove the dash from the beginning of li elements.
editor.on('PastePreProcess', function (e) {
e.content = e.content.replace(/<li>- /g, "<li>")
});
},
因此，如果用户从 Word 中粘贴任何项目符号，它将成为破折号项目符号列表（默认）。然后他们可以突出显示列表并选择圆形、圆盘或方形来获取其他子弹类型。