ckeditor 5 自定义下拉菜单呈现为空

Question

我遵循了 ckeditor 5 的指南： https://ckeditor.com/docs/ckeditor5/latest/api/module_ui_dropdown_dropdownview-DropdownView.html 我还发现了这个主题： 在 ckeditor5 下拉项上注册点击监听器 我关注了他们两个，但下拉菜单呈现为空： 看起来怎么样

我希望下一个代码将创建包含 2 个元素的下拉菜单：英语和西班牙语。

这是我插件的代码：

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import {createDropdown, addListToDropdown} from "@ckeditor/ckeditor5-ui/src/dropdown/utils";
import Collection from "@ckeditor/ckeditor5-utils/src/collection";
import Model from "@ckeditor/ckeditor5-engine/src/model/model";
import SplitButtonView from "@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview";

export default class Preset extends Plugin {

    static get pluginName() {
        return 'Preset';
    }

    init() {
        const editor = this.editor;

        editor.ui.componentFactory.add('Preset', locale => {
            const dropdownView = createDropdown(locale);
            dropdownView.buttonView.set({
                label: 'Translate',
                withText: true,
            });

            const items = new Collection();
            items.add( {
                type: 'button',
                model: new Model({
                    id: 'en',
                    withText: true,
                    label: 'English',
                })
            } );
            items.add( {
                type: 'button',
                model: new Model({
                    id: 'es',
                    withText: true,
                    label: 'Spanish'
                })
            } );

            addListToDropdown(dropdownView, items);

            dropdownView.on('execute', (eventInfo) => {
                const { id, label } = eventInfo.source;

                if ( id === 'en' ) {
                    console.log('Object (en):', label);
                } else if ( id === 'es' ) {
                    console.log('Object (es):', label);
                }
            });

            return dropdownView;
        });
    }
}

有ckeditor的代码（我如何注册我的插件）：

/**
 * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

// The editor creator to use.
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import Indent from '@ckeditor/ckeditor5-indent/src/indent';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation';
import Preset from "./preset";

export default class ClassicEditor extends ClassicEditorBase {}

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
    EssentialsPlugin,
    UploadAdapter,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    CKFinder,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    Indent,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar,
    TextTransformation,
    Preset
];

// Editor configuration.
ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
            'heading',
            '|',
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            '|',
            'indent',
            'outdent',
            '|',
            'imageUpload',
            'blockQuote',
            'insertTable',
            'mediaEmbed',
            'undo',
            'redo',
            'Preset'
        ]
    },
    image: {
        toolbar: [
            'imageStyle:full',
            'imageStyle:side',
            '|',
            'imageTextAlternative'
        ]
    },
    table: {
        contentToolbar: [
            'tableColumn',
            'tableRow',
            'mergeTableCells'
        ]
    },
    // This value must be kept in sync with the language defined in webpack.config.js.
    language: 'en'
};

我该如何称呼它（它发生在其他项目中）：

setCKEditors = function(){
    var textareas = $('.ckeditor, .ckeditor-collection textarea');

    for(var i=0; i < textareas.length; i++) {
        if(textareas[i].style.display === '') {
            ClassicEditor
                .create(textareas[i], {
                    link: {
                        decorators: {
                            openInNewTab: {
                                mode: 'manual',
                                label: 'Open in a new tab',
                                defaultValue: true,         // This option will be selected by default.
                                attributes: {
                                    target: '_blank',
                                    class: 'text-link'
                                }
                            }
                        }
                    }
                })
                .catch(error => {
                    console.error(error);
                });
        }
    }
};

$(function() {
    console.log('E');
    setCKEditors();
    $('.sonata-collection-add').click(function(){
        setTimeout(function(){
            setCKEditors();
        }, 500);
    });

    $('.dropdown a.sonata-toggle-filter').each(function() {
        if ($(this).attr('sonata-filter') == 'false') {
            return;
        }
        if( ~$(this).first().attr('filter-target').indexOf('issued_to_students') ) {
            if ($(this).find('i').hasClass('fa-square-o')) {
                $(this).click();
            }
        }
    });
});

我做错了什么？也许我应该提供一些 css 或其他选项？

Answer 1

我不知道你是否还有这个问题，但我也遇到过同样的问题，这是因为我没有对 Model 类使用良好的导入。好的进口是：

import Model from '@ckeditor/ckeditor5-ui/src/model';

Answer 2

经过 32 小时的集思广益，我刚刚发现这是他们的框架和所有文档中的一个错误。

而不是这个：

items.add({
    type: 'button',
    model: new Model({
        id: 'en',
        withText: true,
        label: 'English',
    })
});

这样写：

items.add({
    type: 'button',
    model: {
        id: 'en',
        withText: true,
        label: 'English',
    }
});

嘘！我刚刚浪费了三天的宝贵时间。