CKEditor5自定義模態插件

Question

我遵循了最初的插件教程，並使“圖像插入”正常工作，但是我想顯示一個具有兩個輸入字段的自定義模式，而不是提示您設置更多屬性。 我如何最好地實現這一點？

我知道如何在普通的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
        })

    })
  }
}

Answer 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 );
        } );
    } )
} );