如何从 CKEditor 5 捕获外部事件？

Question

我正在关注 this guide 为 CKEditor 5 编写自定义插件。我实际上创建了一个名为 InsertImage 的 class，它扩展了 Plugin class。然后，我将 InsertImage 关联到编辑器工具栏和支持的插件，它工作正常。

问题是我必须打开一个模式，其中包含列表中的图像列表，到目前为止我是这样做的：

import Plugin from '@ckeditor/ckeditor5-core/src/plugin'
import Image from '@ckeditor/ckeditor5-image/src/image';
import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';

class InsertImage extends Plugin {
    init() {
        const editor = this.editor;

        editor.ui.componentFactory.add( 'insertImage', locale => {
            const view = new ButtonView( locale );

            view.set( {
                label: 'Insert image',
                icon: imageIcon,
                tooltip: true
            } );

            // Callback executed once the image is clicked.
            view.on( 'execute', () => {
                
                // open the modal which contains a list of image
                $('#modal-media-browse').modal('show');
                
            } );

            return view;
        } );
    }
}

当我点击编辑器的图片按钮时，模态框被正确打开，但我不明白如何从自定义模态框传递图片 url。本质上，在我从模态（这是一个简单的列表）中选择图像之后，我有一个按钮可以让我获得图像的属性，如 src、id 等...

如何将此自定义属性传递给编辑器？

CKEditor教程中的示例描述了如何获取插入的内容：

const imageUrl = prompt( 'Image URL' );

然后我们有：

editor.model.change( writer => {
    const imageElement = writer.createElement( 'image', {
        src: imageUrl
    } );


    // Insert the image in the current selection location.
    editor.model.insertContent( imageElement, editor.model.document.selection );
} );

但是如何在外部脚本中应用相同的逻辑？我想我应该触发编辑器必须捕获的事件并获取该事件发送的图像的 src。

有人可以告诉我如何将图像 url 从外部脚本传递给编辑器吗？

Answer 1

我的问题解决方案：

class InsertImage extends Plugin {
    init() {
        const editor = this.editor;

        editor.ui.componentFactory.add( 'insertImage', locale => {
            const view = new ButtonView( locale );

            view.set( {
                label: 'Insert image',
                icon: imageIcon,
                tooltip: true
            } );

            // Callback executed once the image is clicked.
            view.on( 'execute', () => {
                
                // apre la modal per la selezione del media
                $('#modal-media-browse').modal('show');

                $('#modal-media-browse').on('hidden.bs.modal', function() {
                    
                    editor.model.change(writer => {
                        const imageElement = writer.createElement('image', {
                            src: $(this).attr('data-src')
                        });
                        editor.model.insertContent(imageElement, editor.model.document.selection);
                    })
                });
            } );

            return view;
        } );
    }
}

我将图像 src 属性存储在模态框上，因此当模态框关闭时，插件内部会触发事件并将图像添加到编辑器中。

如何从 CKEditor 5 捕获外部事件？

How to catch an external event from CKEditor 5?

javascript

ckeditor5