如何在CKEditor5中配置列表样式？

Question

我们有一个要求，必须从 CKEditor 5 中删除一种列表样式 目前如果启用了列表属性插件，那么 CKE 5 中可以使用以下 6 种列表样式。

1. 十进制
2. 带前导零的小数
3. 小写罗马
4. 上罗马
5. 下拉丁语
6. 上拉丁语

但是我们有一个要求，我们不想向用户显示带有前导零的十进制列表样式。无论如何我可以配置它吗？可以配置吗？

Answer 1

不幸的是，没有官方方法可以禁用它，因为它包含在插件的核心中。

可能的方法是您根据需要自定义编辑器，您可以在这里找到它。

Answer 2

一种解决方案是用在后台使用原始插件命令的自定义版本替换原始菜单项。

import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
import ButtonView from "@ckeditor/ckeditor5-ui/src/button/buttonview";
import {Locale} from "@ckeditor/ckeditor5-utils";
import numberedListIcon from "../theme/icons/numberedlist.svg";
import bulletedListIcon from '../theme/icons/bulletedlist.svg';
import listStyleDecimalWithLeadingZeroIcon from '../theme/icons/liststyledecimalbubble.svg';
import {Command} from "@ckeditor/ckeditor5-core";

export default class CustomListStyle extends Plugin {
  init() {

    const editor = this.editor;
    const numberedListCommandName = 'numberedList';
    const bulletedListCommandName = 'bulletedList';
    const listStyleCommand = editor.commands.get( 'listStyle' )!;

    function onChange(parentCommand: Command, button: ButtonView, type: string, isDefault: boolean) {
      let hasValue = false
      if (parentCommand.value) {
        hasValue = true;
      }
      button.isOn = listStyleCommand.value === type || (isDefault && listStyleCommand.value === 'default' && hasValue);
    }

    function getToolbarButton({
      type,
      label,
      isDefault,
      buttonIcon,
      parentCommandName
      }:{
      type: string,
      label: string,
      isDefault: boolean,
      buttonIcon: string;
      parentCommandName: string
    }) {
      return ( locale: Locale ) => {
        const button = new ButtonView();

        button.label = label;
        button.tooltip = true;
        button.icon = buttonIcon;

        const parentCommand = editor.commands.get( parentCommandName )!;

        listStyleCommand.on('change:value', () => {
          onChange(parentCommand, button, type, isDefault);
        });
        parentCommand.on('change:value', () => {
          onChange(parentCommand, button, type, isDefault);
        });
        button.bind('isEnabled' ).to( parentCommand, 'isEnabled' );

        button.on('execute', () => {
          // If the content the selection is anchored to is a list, let's change its style.
          if (parentCommand.value) {
            // If the current list style is not set in the model or the style is different than the
            // one to be applied, simply apply the new style.
            if (listStyleCommand.value !== type) {
              editor.execute('listStyle', {type});
            }
            // If the style was the same, remove it (the button works as an off toggle).
            else {
              editor.execute(parentCommandName);
            }
          }
          // Otherwise, leave the creation of the styled list to the `ListStyleCommand`.
          else {
            editor.model.change(() => {
              editor.execute('listStyle', {type});
            });
          }
        });

        return button;
      }
    }

    editor.ui.componentFactory.add( 'customNumberedListDecimal', getToolbarButton({type:'decimal', label: "Numbered list (circle)", isDefault: true,buttonIcon: numberedListIcon, parentCommandName: numberedListCommandName}));
    editor.ui.componentFactory.add( 'customNumberedListRoman', getToolbarButton({type:'upper-roman',label: "Numbered list (roman)", isDefault: false, buttonIcon: listStyleDecimalWithLeadingZeroIcon,  parentCommandName: numberedListCommandName}));
    editor.ui.componentFactory.add( 'customBulletedList', getToolbarButton({type:'disc',label: "Bulleted list", buttonIcon: bulletedListIcon, isDefault: true, parentCommandName: bulletedListCommandName}));
  }
}

用途：

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ DocumentListProperties,CustomListStyle, /* ... */ ],
        toolbar: [ 'customNumberedListDecimal','customNumberedListRoman', 'customBulletedList' /*, 'bulletedList', 'numberedList', ... */ ],
    } )
    .then( /* ... */ )
    .catch( /* ... */ );