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

Question

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

默认情况下，如果您在 UI 中更改列表元素的字体大小，ckeditor5 会在 li 内建立一个跨度并为用户选择的字体大小设置类。但问题是，文本例如是 16 像素，列表的项目符号点是默认字体大小，例如 10 像素。这看起来很疯狂，所以我们决定制作一个插件，将通常插入到 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 文档中为 li 标签设置的类。

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

也许知道ckeditor5的人可以给我们一个提示，我们将非常感激:-)

标签： javascriptckeditorckeditor5ckeditor5-plugin