CKEditor5 自定义模态插件答案

【问题标题】：CKEditor5 Custom Modal PluginCKEditor5 自定义模态插件
【发布时间】：2018-12-28 11:41:50
【问题描述】：

我遵循最初的plugin tutorial 并让图像插入工作，但我想显示一个带有两个输入字段的自定义模式，而不是提示设置更多属性。我将如何最好地实现这一点？

我知道如何在普通的 JS/CSS 中实现一个普通的模态框，但我有点困惑在哪里放置 HTML 以在按钮单击时显示模态框。

class Test extends Plugin {
init() {
    editor = this.editor
    editor.ui.componentFactory.add('SampleView', (locale) => {

        const view = new ButtonView(locale)

        view.set({
            label: 'test',
            icon: imageIcon,
            tooltip: true
        })
        view.on('execute', () => {
     //here I would like to open the modal instead of the prompt
        })

    })
  }
}

【问题讨论】：

您找到解决方案了吗？

标签： javascript ckeditor ckeditor5

【解决方案1】：

例如，您可以尝试使用SweetAlert2，它是默认弹出窗口的零依赖纯 javascript 替换。

import swal from 'sweetalert2';
...
view.on( 'execute', () => {
    swal( {
        input: 'text',
        inputPlaceholder: 'Your image URL'
    } )
    .then ( result => {
        editor.model.change( writer => {
            const imageElement = writer.createElement( 'image', {
                src: result.value
            } );

            editor.model.insertContent( imageElement, editor.model.document.selection );
        } );
    } )
} );

【讨论】：