CKEDITOR5 添加自定义类以列出元素并保留它们

如何解决CKEDITOR5 添加自定义类以列出元素并保留它们

目前我正在为 ckeditor5 开发一个插件，如果用户正在更改 UI 中的字体大小，它应该将 css 类添加到 li - 标签。

默认情况下，如果您确实在 UI 中更改了列表元素的字体大小，则 ckeditor5 会在 li 内建立一个跨度，并为用户选择的字体大小设置类。但问题是，文本是例如 16px，列表的项目符号的默认字体大小为 10px。这看起来很疯狂，所以我们决定制作一个插件，将通常插入 li 标签内的 span 标签中的 css 类直接设置为 li 标签。

我们已经通过执行以下操作达到了该行为：

customFontSizeDropDown(editor) {
        const { t } = editor.locale;
        editor.ui.componentFactory.add('fontSizeDropdown',() => {
            const editor = this.editor;

            const command = editor.commands.get('fontSize');

            // Use original fontSize button - we only changes its behavior.
            const dropdownView = editor.ui.componentFactory.create('fontSize');

            dropdownView.buttonView
                .bind('label')
                .to(command,'value',(value) => {
                    if (
                        editor.editing.view.document.selection.focus &&
                        value !== undefined
                    ) {
                        const listItem =
                            editor.editing.view.document.selection.focus.parent;
                        if (listItem.name == 'li') {
                            editor.editing.view.change((writer) => {
                                writer.setAttribute(
                                    'class',`text-${value}`,listItem
                                );
                            });
                        }
                    }
                    
                    return value ? value : t('default');
                });

            return dropdownView;
        });
    }

我们还想在每个新建立的 css 类上设置默认的字体大小 列表项，这也适用于此代码：

addClasstoListElement(editor) {
        editor.conversion.for('downcast').add((dispatcher) => {
            dispatcher.on(
                'insert:listItem',(evt,data,conversionApi) => {
                    const viewWriter = conversionApi.writer;
                    for (const child of data.item.getChildren()) {
                        let liClass = child.hasAttribute('fontSize')
                            ? `text-${child.getAttribute('fontSize')}`
                            : 'text-default';
                        viewWriter.addClass(
                            liClass,conversionApi.mapper.toViewElement(data.item)
                        );
                    }
                },{ priority: 'low' }
            );
        });
    }

现在这个功能有两个问题：

• 如果我们保存 ckeditor5 的内容并重新加载页面，我们为 li 标签设置的类在重新加载后就会消失。为防止发生这种情况，我们读取 li 标签内的 span 的类，并在重新加载时将它们设置为 li 标签，但我m sure there should be a better solution,but we can不知道如何从ckeditor 文档。

• 第二个问题是，当用户按下“Enter”键在列表中建立一个新项目时，我们希望继续使用用户为最后一个列表项目选择的字体大小。我们尝试将最后一个li标签的类复制到新建立的标签中，我们可以得到这个类，但我们无法将这个类写入新建立的列表项。

也许知道ckeditor5的人可以为我们的问题提供一些提示，我们将不胜感激:-)