CKEditor 5：无法向“img”标签添加多个属性

Question

我已经实现了一个自定义数学插件并将其集成到 ck5 中。这个插件将数学乳胶转换为图像方程，我可以使用以下代码将转换后的数学方程图像渲染到 ck5 编辑器中。

editor.model.change(writer => {
  const imageElement = writer.createElement('image', {
    src: data.detail.imgURL
  });
  editor.model.insertContent(imageElement, selection);
});

仍然在这里一切正常。当我尝试将图像标签中的原始乳胶方程值存储为自定义属性时（属性名称为data-mathml）。它去除了自定义属性。所以我浏览了文档并尝试但无法添加自定义属性。

下面是我的代码：

class InsertImage extends Plugin {

    init() {
        const editor = this.editor;
        const view = editor.editing.view;
        const viewDocument = view.document;

        // Somewhere in your plugin's init() callback:
        view.addObserver( ClickObserver );

        editor.ui.componentFactory.add('insertImage', locale => {
            const view = new ButtonView(locale);
            view.set({
                label: 'Add Equations',
                withText: true,
                tooltip: true
            });

            // Callback executed once the image is clicked.
            this.listenTo(view, 'execute', () => {
                openModel();
            });
            return view;
        });

        window.addEventListener('setDatatoCK', function(data){
            const selection = editor.model.document.selection;
            editor.model.change( writer => {
                 const imageElement = writer.createElement( 'image', {
                    src: data.detail.imgURL,
                    'data-mthml': data.detail.latexFrmla,
                } );
                editor.model.insertContent( imageElement, selection );
            } );
        })

        this.listenTo( editor.editing.view.document, 'click', ( evt, data ) => {
            if ( data.domEvent.detail == 2 ) {
                editorToPopupdoubleClickHandler( data.domTarget, data.domEvent );
                evt.stop();
            }
        }, { priority: 'highest' } );


    }
};

我想向图像标签添加多个属性。我应该怎么做才能添加多个属性？

（注意：我可以创建一个新的自定义标签（标签名为“ math具有多个属性 ”的），但不能用于图像标签）

请帮我解决一下这个。这个拦截器适合我。

尝试的方法： 为了实现这一点，我创建了一个具有多个属性的自定义标签，并在此自定义标签下附加了图像标签。它按预期工作正常，但我想将多个属性添加到图像标记而不是自定义标记。

?? 预期结果

? 实际结果

其他详情

• 浏览器：Google Chrome 版本 78.0.3904.108（官方版本）（64 位）
• 操作系统：macOS Mojave 10.14.6
• CKEditor 版本：CKEditor 5
• 已安装的 CKEditor 插件：ckeditor5-editor-classic,ckeditor5-image,ckeditor5-essentials,ckeditor5-basic-styles,ckeditor5-core,ckeditor5-ui

---

Answer 1

希望您已经找到了这个答案的解决方案。在花了几个小时寻找类似问题的解决方案后，我已经让它发挥作用了。见下文：

// you have to import the insertImage fn to be able to override default imageinsert fn
import { insertImage } from '@ckeditor/ckeditor5-image/src/image/utils.js'

// this method HAVE to be automatically called when ckeditor is onready.
// You can add custom eventlistener or on the html tag just define listener:
// in Vue2 we used to do like this: <ckeditor @ready="someFnOnCkEditorReadyState()" />
someFnOnCkEditorReadyState() {
    // as for img tag the options supported by ckeditor is very limited, we must define our properties to extend the used schema
    editor.model.schema.extend('image', { allowAttributes: ['data-mathml'] })

    // add conversion for downcast
    editor.conversion.for('downcast').add(modelToViewAttributeConverter('data-mathml'))

    // add conversion for upcast
    editor.conversion.for('upcast').attributeToAttribute({
        view: {
            name: 'image',
            key: 'data-mathml',
        },
        model: 'data-mathml',
    })
}

// then you have to implement your custom image insert method
// from now on this will be your default insertImage fn
// this modification might require other modifications for example to add a custom image browser button to the toolbar
otherFnToInsertImg() {
    insertImage(editor.model, {
        src: image.url,
        'data-mathml': 'here comes the magic',
    })
}

希望它可以帮助某人节省一些时间。;)