Question

我想知道是否可以创建自定义项目符号和数字列表？

我添加了插件使用列表，并尝试了其他人尝试here和here的示例。第一个似乎允许进行一些更改。但是，我试图用自定义图像替换子弹或数字列表的列表样式图像，但“样式”选项“listStyleImage”似乎不起作用，即使它出现在应用程序代码中。

我还尝试添加一个css类来查看它是否可行，但“classes”语句似乎也不起作用。

我在示例中设置了init部分并按照formats文档中的选项进行了操作，但是样式的类和设置“listStyleImage”似乎不起作用。

我很确定手动将类添加到html代码中会起作用。我只想将它设置为自定义列表，这样就不必手动完成。

这甚至可能吗？

还有另一种方法可以实现这个目标吗？

更新：为了解决这个问题，我不得不通过编辑器手动将类添加到html中。它有效，但如果有办法通过添加自定义列表来实现它会很好。

Answer 1

到目前为止，我发现将子弹变为图像的唯一方法是使用

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
        }   
    }],

Answer 2

在进行研究时偶然发现了这个问题，在同一个问题上，经过一些调试后发现了一种方法来做到这一点

应安装并激活advlist插件
在初始化中，应配置高级列表样式，例如：

{{1}}

这为您提供了默认的项目符号样式以及自定义图像样式。 styles数组设置UL元素的属性。并使用advlist_number_styles属性为数字列表设置模板。

Answer 3

以下是具有多级编号的ol列表的一个很好的例子。

EXAMPLE 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;
}

Answer 4

背景

我知道这个问题已有5年历史了，但我遇到了类似的问题，但没有资源可以解决。我也知道这很少有问题，因为世界在世界各地都使用小黑圈作为子弹（因此得名）。我在TinyMCE社区网站上发布了问题，但是几天后，我的帐户被锁定了（什么？！）。如果有人有更好的解决方案，请告诉我。此解决方案似乎有点像与Duck Tape结合在一起，并且如果TinyMCE更新发生更改，此破解将丢失。

Link to that issue

我的问题

我住在日本，在我工作过的公司中……他们的默认“子弹”是破折号。他们全部。我不知道为什么像这样：

通过提供IT服务来支持业务并深入参与系统解决方案的过程：

-了解公司的先前策略

-研究业务收益（ROI）

TinyMCE不允许对自定义HTML插入文档中的列表或高级列表插件进行任何自定义。如果可以，我可以在所有不同的项目符号上设置一个类，甚至更好，为列表类型创建一个新的项目符号类型。但据我所知，这是不可能的。（如果没有人知道如何在TinyMCE中自定义列表，而无需编辑源代码，请告诉我！）

我的修正

我将破折号设置为默认值：

在站点html和Tiny编辑器中，我在所有带有项目符号的地方使用了“ order-wrapper”类，在编辑器中，我使用了：body_class：“ order-wrapper”，

此CSS使没有'list-style-type'的所有UL像项目符号列表一样缩进，并带有破折号般的项目符号：

select @paymentRecordCount = RecordsCount from (select ... from ..) where RecordType = 1

但是当粘贴word文档的破折号时，它们包括破折号，所以我最终得到： -了解公司的先前策略

因此，为了摆脱行首的破折号，我在编辑器init中添加了代码，以将-粘贴到列表元素的行首处删除-。（可能有更好的方法进行过滤，因此，如果有人有更好的方法，请告诉我）：

.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粘贴任何项目符号，它将成为破折号项目列表（默认）。然后他们可以突出显示列表并选择圆形，圆盘形或方形以获得其他项目符号类型。

Answer 5

根据tiny-mce documentation，您只能为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);
}

tinymce自定义项目符号和数字列表

5 个答案: