自定义inymce富文本编辑器列表,可以通过以下几个步骤实现:
1、配置中,加入lists和advlist插件,toolbar加入有序列表numlist或者无序列表bullist。
plugins: 'lists, advlist',
toolbar: 'bullist numlist'
2、自定义列表的样式,在配置对象中,有序列表设置advlist_number_styles属性,无序列表设置advlist_bullet_styles属性。
advlist_bullet_styles: 'default,circle,disc,square', // 不设置时的默认值
advlist_number_styles: 'default,lower-alpha,lower-greek,lower-roman,upper-alpha,upper-roman' // 不设置时的默认值
如果需要自定义不同的list-style-type可以设置以上的两个属性,例如,加入小写英文a, b, c的列表,可以写成:
advlist_number_styles: 'lower-alpha'
如果想像list-style-type属性设置字符串的值,例如:加入"♦",可以写成:
advlist_number_styles: 'lower-alpha,"♦"'
如果是想设置比较炫的list-style-type,可以自定义@couter-style,定义方式可以想看以下网站:@counter-style - CSS(层叠样式表) | MDN
3、配置完自定义的list-style-type后,会发现工具列表中的图标是默认的图标,要修改这个图标,可以为其添加图标:
// 第2个参数为对应的svg图标
editor.ui.registry.addIcon('list-num-lower-alpha', '<svg width="24" height="24"><path d="M16.3 11c.2 0 .3 0 .5.2l.2.6v7.4c0 .3 0 .4-.2.6l-.6.2H7.8c-.3 0-.4 0-.6-.2a.7.7 0 01-.2-.6v-7.4c0-.3 0-.4.2-.6l.5-.2H8V8c0-.8.3-1.5.9-2.1.6-.6 1.3-.9 2.1-.9h2c.8 0 1.5.3 2.1.9.6.6.9 1.3.9 2.1v3h.3zM10 8v3h4V8a1 1 0 00-.3-.7A1 1 0 0013 7h-2a1 1 0 00-.7.3 1 1 0 00-.3.7z" fill-rule="evenodd"/></svg>')
通过以上3步可以成功自定义列表。