Я пытаюсь использовать расширенный плагин изображения для вставки изображения в редакторе.Поскольку мне нужно повторно использовать функцию поиска углового приложения, я не могу использовать диалог по умолчанию, который используется плагином.
Я пытался использовать событие, чтобы открыть диалоговое окно вне ckeditor, а затем при выборе я снова отправил пользовательское событие с данными.Теперь я застрял, так как я не могу вызвать виджет, который будет вставлять изображение в редактор.
CKEDITOR.plugins.add('image2', {
requires: 'widget',
icons: 'image',
init: function (editor) {
editor.addCommand('insertImage', {
exec: function (editor) {
var elm = document.getElementById('editor');
// sent an event to tell angular to load the component
// we also need to know where in text we are?
var event = new Event('openSearchDialog');
document.dispatchEvent(event);
}
});
// Subscribing to event emitted on selection of image
document.addEventListener("imgSelected", function (event) {
console.log(event.detail.data)
editor.execCommand('image') // this is not working
});
// Add toolbar button for this plugin.
editor.ui.addButton('image', {
label: editor.lang.common.image,
command: 'insertImage',
//command: 'image',
toolbar: 'insert,10'
});
editor.widgets.add('image', {
template:
'<figure>' +
'<img src="https://cdn.pixabay.com/photo/2017/05/09/21/49/gecko-2299365_960_720.jpg" />' +
'<figcaption>Caption</figcaption>' +
'</figure>',
editables: {
content: {
selector: 'figcaption',
allowedContent: 'strong em link'
}
},
allowedContent:
'figure; img; figcaption',
requiredContent: 'figure',
upcast: function (element) {
return element.name == 'figure';
}
});
}
});
И в угловых я сделал
@HostListener('document:openSearchDialog', ['$event']) onMouseEnter(event: any) {
this.openSearchDialog();
}
Как только изображениевыбрано создание пользовательского события
let event = new CustomEvent("imgSelected", {
bubbles: true,
detail: {
data: img
}
});
this.el.nativeElement.dispatchEvent(event);
}
В редакторе кнопка добавления, если я использую команду «insertImage», то открывается диалоговое окно, но не удается вызвать виджет, а при использовании «изображения» затемизображение добавляется в редактор, как и ожидалось.Я не могу соединить эти две функции.