Я выполнил начальный плагин учебник и заставил вставку изображения работать, но я хотел бы отобразить настраиваемый модальный экран с двумя полями ввода вместо приглашения, чтобы установить еще несколько атрибутов. Как мне лучше всего это реализовать?
Я знаю, как реализовать обычное модальное окно на простом 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 );
} );
} )
} );
Вы нашли решение?