javascript - CKEditor 5：无法向'img'标签添加多个属性(CKEditor 5 : Unable to add multiple attributes to 'img' tag)

Question

I have implemented a custom math plugin and integrated it into ck5.

(我已经实现了一个自定义数学插件，并将其集成到ck5中。)

this plugin will convert math latex to image equation and I'm able to render the converted math equation image into a ck5 editor using the below code.

(这个插件会将数学乳胶转换为图像方程式，我可以使用以下代码将转换后的数学方程式图像渲染到ck5编辑器中。)

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

Still here everything is working fine.

(仍然在这里一切正常。)

when i'm trying to store original latex equation value in image tag as custom attribute (attribute name is data-mathml ).

(当我尝试将原始乳胶方程值存储在图像标签中作为自定义属性（属性名称为data-mathml ）时。)

It strips out custom attributes.

(它去除了自定义属性。)

So I have gone through the documentation and tried but was not able to add the custom attribute.

(因此，我浏览了文档并尝试过但无法添加自定义属性。)

Below is my code :

(下面是我的代码：)

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' } );


    }
};

I want to add multiple attributes to the image tag.

(我想向图像标签添加多个属性。)

What should I do to add multiple attributes?

(如何添加多个属性？)

(Note: I'm able to create a new custom tag (tag named " math ") with multiple attributes but not for image tag)

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

Please help me with this.

(请帮我解决一下这个。)

this blocker for me.

(对我来说是个障碍。)

Methods tried: In order to achieve this, I have created one custom tag with multiple attributes and append image tags under this custom tag.

(尝试的方法：为了实现这一点，我创建了一个具有多个属性的自定义标签，并在该自定义标签下附加了图片标签。)

It's working fine as expected but I want to add multiple attributes to image tag not with the custom tag.

(它按预期工作正常，但是我想不使用自定义标签将多个属性添加到图像标签。)

?? Expected result(??预期结果)

? Actual result(?实际结果)

?? Other details(details其他详细)

• Browser: Google Chrome Version 78.0.3904.108 (Official Build) (64-bit)

  (浏览器：Google Chrome版本78.0.3904.108（官方内部版本）（64位）)

• OS: macOS Mojave 10.14.6

  (作业系统：macOS Mojave 10.14.6)

• CKEditor version: CKEditor 5

  (CKEditor版本：CKEditor 5)

• Installed CKEditor plugins: ckeditor5-editor-classic,ckeditor5-image,ckeditor5-essentials,ckeditor5-basic-styles,ckeditor5-core,ckeditor5-ui

  (已安装的CKEditor插件：ckeditor5-editor-classic，ckeditor5-image，ckeditor5-essentials，ckeditor5-basic-style，ckeditor5-core，ckeditor5-ui)

---

  ask by Vaibhav Bhuva translate from so

Answer 1

等待大神答复