如何在CKEditor5中对齐图像标题<figcaption>?

问题描述

我有一个自定义插件来插入图像,并且在插入图像时,我试图使标题认为左对齐。 此外,当我在CKEditor中编辑标题时,工具栏中的Alignment插件被禁用。

我的插件

class Insertimage extends Plugin {
    init() {
        const { editor } = this;

        editor.ui.componentFactory.add('insertimage',(locale) => {
            const view = new ButtonView(locale);

            view.set({
                label: 'Insert image',icon: imageIcon,tooltip: true,});

            // Callback executed once the image icon is clicked.
            view.on('execute',() => {
                // 1. open image list modal
                const openImagesDialogEvent = new Event('open-image-list');
                document.body.dispatchEvent(openImagesDialogEvent);

                // 2. wait for url and description from modal
                document.body.addEventListener(
                    'add-image-to-textfield',function addImagetoTextfield(event) {
                        if (event.detail.imageUrl) {
                            editor.model.change((writer) => {
                                const image = writer.createElement('image',{
                                    src: event.detail.imageUrl,});

                                if (event.detail.imageCaption) {
                                    const caption = writer.createElement('caption');

                                    writer.appendText(event.detail.imageCaption,caption);
                                    writer.setAttribute('alignment','left',caption);
                                    writer.append(caption,image);
                                }

                                editor.model.insertContent(image);
                                editor.execute('bold');
                            });
                        }

                        document.body.removeEventListener(
                            'add-image-to-textfield',addImagetoTextfield
                        );
                    }
                );
            });

            return view;
        });
    }
}

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)