tinymce 自定义项目符号和编号列表

Question

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

我添加了插件 advlist 并尝试了其他人尝试过的示例 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

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

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

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 属性为号码列表设置模板。

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 更新发生变化，这个 hack 将会丢失。

Link to that issue

我的问题

我住在日本，我工作的公司...他们默认的“项目符号”是破折号。他们都是。我不知道为什么。像这样：

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

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