我遵循了初始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
})
})
}
}
最佳答案
例如,你可以尝试使用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 );
} );
} )
} );
关于javascript - CKEditor5 自定义模态插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51437824/