如何解决如何通过自定义图库按钮将所选图像附加到角度 ckeditor5
我正在使用 ckeditor 5 的 angular 版本。我创建了一个自定义插件按钮,单击时会打开一个画廊模式。我已经在自定义编辑器构建中包含了我的插件。从图库模式中选择图像时,我不知道如何将所选图像附加到编辑器。请指导我。
import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
export default class CustomgallaryPlugin extends Plugin {
init() {
const editor = this.editor;
editor.ui.componentFactory.add( 'gallary',locale => {
const view = new ButtonView( locale );
view.set( {
label: 'gallary',icon: imageIcon,tooltip: true
} );
// Callback executed once the icon is clicked
view.on( 'execute',() => {
// fire a JS event
// eslint-disable-next-line no-undef
window.dispatchEvent( new Event( 'onClickgallaryButton' ) );
} );
return view;
} );
}
}
export class AddImageComponent {
//ckeditor events
public componentEvents: string[] = [];
public Editor = ClassicEditor;
public editorData = ``;
//inline editor
editorConfig = {
placeholder: 'Start typing here',language: 'en'
};
// gallary modal
@HostListener('window: onClickgallaryButton',['$event'])
opengalleryPopup(event) {
const modalOptions = {
backdrop: true,keyboard: true,focus: false,show: false,ignoreBackdropClick: true,class: ' modal-dialog modal-dialog-scrollable modal-fluid',containerClass: 'model fade top',animated: true,data: {
title: '',text: '',}
};
this.modalRef = this.modalService.show(ImagebrowserComponent,modalOptions);
this.modalRef.content.galleryResp.subscribe(name => {
if (name) {
var img = document.createElement('img'); // Use DOM HTMLImageElement
img.src = name;
**//How to insert to the editor**
}
});
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。