如何通过自定义图库按钮将所选图像附加到角度 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 (将#修改为@）

angular angular ckeditor5 ckeditor5-plugin