我在单个网页上有两个编辑器实例（一个是问题，第二个是答案），并实现了自定义的 Add Equations 插件。 每当我尝试在问题编辑器中添加方程式时，都会在问题和答案编辑器中（而不是仅在问题编辑器中）添加方程式。我发现我的自定义方程式插件存在问题。我已经尝试了多种方法，但是无法实现预期的输出。

（注意：使用角度7中的元素reference（viewChild）渲染两个编辑器实例）

ckeditor-tool.ts @ViewChild('editor') public editorRef: ElementRef;

ckeditor-tool.html <textarea class="editor" #editor name="question" placeholder=""></textarea>

两个编辑器都可以正确渲染。

自定义插件代码如下：

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import { modelToViewAttributeConverter } from '@ckeditor/ckeditor5-image/src/image/converters';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
import ClickObserver from '@ckeditor/ckeditor5-engine/src/view/observer/clickobserver';
export class MathText extends Plugin  {

    init() {
        const editor = this.editor; 
        const view = editor.editing.view;
        const componentFactory  = editor.ui.componentFactory;

        this._defineschema(); 
        this._defineConverters();
        this._defineListenerModalToCK();
        view.addobserver( ClickObserver );

        componentFactory.add('MathText',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();
                console.log("MathText Plugin called");
            });
            return view;
        });

        this.listenTo( editor.editing.view.document,'click',( evt,data ) => {
            // if ( data.domEvent.detail == 2 ) {
            if ( data.domEvent.detail == 1 ) { // temp
                console.log("_editorToPopupdoubleclickHandler");
                this._editorToPopupdoubleclickHandler( data.domTarget,data.domEvent );
                evt.stop();
            }
        },{ priority: 'highest' } );


    }

    _defineschema () {
        const schema = this.editor.model.schema;
        schema.extend( 'image',{
            allowAttributes: [ 'data-mathml','advanced' ]
        } );
    }
    _defineConverters() {
        const conversion = this.editor.conversion;
        conversion.for( 'downcast' ).add( modelToViewAttributeConverter( 'data-mathml' ) );
        conversion.for( 'upcast' ).attributeToAttribute( {
            view: {
                name: 'img',key: 'data-mathml'
            },model: 'data-mathml'
        } );
        conversion.for( 'downcast' ).add( modelToViewAttributeConverter( 'advanced' ) );
        conversion.for( 'upcast' ).attributeToAttribute( {
            view: {
                name: 'img',key: 'advanced'
            },model: 'advanced'
        } );
    }
    _defineListenerModalToCK () {
        var model = this.editor.model;
        var selection = model.document.selection;
        window.addEventListener('setDatatoCK',(data) => {
            model.change( writer => {
                 const imageElement = writer.createElement( 'image',{
                    src: data.detail.imgURL,'data-mathml': data.detail.latexFrmla,advanced : data.detail.advanced
                } );
                model.insertContent( imageElement,selection );               
            } );
        })
    }

    _editorToPopupdoubleclickHandler(element,event) {
        if (element.nodename.toLowerCase() == 'img') {
            var latexStr = element.getattribute("data-mathml");
            var advanced = element.getattribute("advanced");
            if (typeof event.stopPropagation != 'undefined') { // old I.E compatibility.
                event.stopPropagation();
            } else {
                event.returnValue = false;
            }
            loadDataFromCkEditortoPopup({latex:latexStr,advanced :advanced});
            // event.stop();
        }

    };

}

✔️预期结果

❌实际结果

?其他详细信息

• 浏览器：Google Chrome版本78.0.3904.108（正式版本）（64位）
• 操作系统：macOS Mojave 10.14.6
• CKEditor版本：CKEditor 5
• 已安装的CKEditor插件：ckeditor5-editor-classic，ckeditor5-image，ckeditor5essentials，ckeditor5-basic样式，ckeditor5-core，ckeditor5-ui

请帮助我。