前端之家

  1. 首页
  2. 问答

CKEditor 5：无法向'img'标签添加多个属性 ✔️预期结果❌实际结果?其他详细信息

• 问答

我已经实现了一个自定义数学插件，并将其集成到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' } );


    }
};

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

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

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

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

✔️预期结果

CKEditor 5：无法向'img'标签添加多个属性 ✔️预期结果❌实际结果?其他详细信息

❌实际结果

CKEditor 5：无法向'img'标签添加多个属性 ✔️预期结果❌实际结果?其他详细信息

?其他详细信息

  • 浏览器：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
JJ27502016 回答：CKEditor 5：无法向'img'标签添加多个属性 ✔️预期结果❌实际结果?其他详细信息

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

// 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',})
}

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

ckeditorckeditor5javascriptplugins
本文链接：https://www.f2er.com/3009588.html

大家都在问