如何在非 npm 环境下使用 CKEditor 插件？

Question

我有一个使用 Jquery 的简单网页。我想使用 CKEditor 5 及其 Mention 插件功能。我已经知道 CKEditor 5 具有模块化架构，每个插件都有很多依赖项，因此他们建议使用 npm 来解决所有依赖项，但我根本不使用 npm，也不想使用它。经过一些研究，我发现我可以使用 online builder 创建自定义构建，所以我继续创建了我自己的自定义构建，其中包含 Mention 插件。之后，我在我的文本区域应用 ckeditor 时包含了提及配置，如下所示：

ClassicEditor
.create( document.querySelector( '#editor'), {
    toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
    heading: {
        options: [
            { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
            { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
            { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
        ]
    },

    mention: {
        feeds: [
            {
                marker: '@',
                feed: [ '@Barney', '@Lily', '@Marshall', '@Robin', '@Ted' ],
                minimumCharacters: 1
            }
        ]
    }
} ).then(function(editor){
    window.editor = editor ;
    editor.editing.view.document.on( 'keyup', ( evt, data ) => {
        ChatterFeed.chatterEvents(data,editor);
    } );
})
.catch( error => {
    console.log( error );
} );

但是这段代码似乎不起作用，当我在文本区域中按 @ 时它也没有做任何事情。我不确定我是否遗漏了一些东西，因为我已经花了很多时间来搜索它而没有运气。

Answer 1

它没有工作，因为我在 Bootstrap 模式弹出窗口中显示了这个编辑器，可能是由于某些 css 问题，它没有工作。我一在主 html 页面上展示它，它就开始正常工作了。

如何在非 npm 环境下使用 CKEditor 插件？

How to use CKEditor plugins in a non npm environment?

javascript

ckeditor