微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何通过自定义图库按钮将所选图像附加到角度 ckeditor5

如何解决如何通过自定义图库按钮将所选图像附加到角度 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 举报,一经查实,本站将立刻删除。