在 CKeditor 的工具欄中添加不間斷空格按鈕

Question

我遇到了 CKeditor (V4.17.0) 的問題。 我在 Symfony (V5) 項目中使用它。 我用這個文檔安裝了所見即所得。 然后我下載了不間斷空間插件，我把它放在了路徑public/bundles/fosckeditor/plugins並配置了我的 yaml 文件：

twig:
    form_themes:
        - '@FOSCKEditor/Form/ckeditor_widget.html.twig'

fos_ck_editor:
    default_config: config
    configs:
        config:
            allowedContent: true
            extraPlugins: 'nbsp'
            removePlugins: 'elementspath,exportpdf,image,media, about'
            toolbar:
                - { name: "styles", items: [ 'Bold', 'Italic', 'Strike' ] }
                - { name: "plugins", items: ['insertNbsp'] }
                - { name: "paragraph", items: ['NumberedList'] }
        plugins:
            nbsp:
                path: 'ckeditor/plugins/nbsp/'
                filename: 'plugin.js'

我的 webpack.config.js：

.copyFiles([
        {
            from: './assets/images',
            to: 'images/[path][name].[ext]',
        },
        {
            from: './node_modules/ckeditor4/',
            to: 'ckeditor/[path][name].[ext]',
            pattern: /\.(js|css)$/,
            includeSubdirectories: false,
        },
        {
            from: './node_modules/ckeditor4/adapters',
            to: 'ckeditor/adapters/[path][name].[ext]'
        },
        {
            from: './node_modules/ckeditor4/lang',
            to: 'ckeditor/lang/[path][name].[ext]'
        },
        {
            from: './node_modules/ckeditor4/skins',
            to: 'ckeditor/skins/[path][name].[ext]'
        },
        {
            from: './node_modules/ckeditor4/vendor',
            to: 'ckeditor/vendor/[path][name].[ext]'
        },
        {
            from: './public/bundles/fosckeditor/plugins',
            to: 'ckeditor/plugins/[path][name].[ext]'
        },
     ])

編輯器出現在頁面上，在我的工具欄中，除了不間斷空間插件之外，我已經得到了我所要求的所有內容。

我怎樣才能插入它？

Answer 1

我不認為這個插件是這樣使用的。 如果我沒記錯的話，您不能將其加載到工具欄中。

您是否可以使用此源代碼而不是原始 plugin.js

CKEDITOR.plugins.add( 'nbsp',
{
    init : function( editor )
    {
    editor.ui.addButton('Insert &nbsp', {
        label: 'Insert  ',
        command: 'insertNbsp',
        toolbar: 'insert',
        icon: this.path + 'icons/icon.png'
    });
        // Insert   if Ctrl+Space is pressed:
        editor.addCommand( 'insertNbsp', {
            exec: function( editor ) {
                editor.insertHtml( ' ', 'text' );
            }
        });
        editor.setKeystroke( CKEDITOR.CTRL + 32 /* space */, 'insertNbsp' );
    }

} );

考慮創建一個圖標文件夾以及您選擇的圖標以在工具欄中查看按鈕。