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


    }
};

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

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

请帮助我。对我来说是个障碍。

尝试的方法： 为了实现这一点，我创建了一个具有多个属性的自定义标签，并在该自定义标签下附加了图片标签。可以正常运行，但是我想不使用自定义标签向图像标签添加多个属性。

✔️预期结果

❌实际结果

?其他详细信息

浏览器：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样式，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',
    })
}

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

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

✔️预期结果

❌实际结果

?其他详细信息

1 个答案: