Javascript 获得一个CKEditor 4插件，与封闭的角度组件进行对话

我在一个简单的Angular 8应用程序中使用了CKEditor 4。我现在想自定义CKEditor 4，即添加一些自定义功能。为此，我首先按照上的说明创建示例时间戳插件。这起作用了

我现在想知道我是否可以从CKEditor 4插件的

exec

方法调用/访问/发送消息到所包含的角度组件。我愿意接受任何想法

我最初的尝试包括从插件调度一个自定义事件，并创建一个

@HostListener

int 封闭的角组件。我的代码如下所示：

app.component.ts:

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  textContent: String;

  @HostListener('noteevent') onEditorCommand() {
    console.log("Received Editor onEditorCommand()");
  }

}

<div id="note_content">
  <ckeditor  id="note" name="note" [(ngModel)]="textContent" ></ckeditor>
  <br/>
<span>
  {{ textContent }}
</span>
</div>

CKEDITOR.plugins.add( 'note', {
    icons: 'note',
    init: function( editor ) {
        console.log('Loading Note Plugin')
        editor.addCommand( 'triggerNote', {
            exec: function( editor ) {
                console.log('triggerNote Clicked: ' + editor.container);
                var divNode = editor.container.$.parentNode.parentNode.parentNode;
                var event = new CustomEvent('noteevent');
                divNode.dispatchEvent(event);
            }
        });

        editor.ui.addButton( 'Note', {
            label: 'Trigger Note',
            command: 'triggerNote',
            toolbar: 'insert'
        });
    }
});

app.component.html:

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  textContent: String;

  @HostListener('noteevent') onEditorCommand() {
    console.log("Received Editor onEditorCommand()");
  }

}

<div id="note_content">
  <ckeditor  id="note" name="note" [(ngModel)]="textContent" ></ckeditor>
  <br/>
<span>
  {{ textContent }}
</span>
</div>

CKEDITOR.plugins.add( 'note', {
    icons: 'note',
    init: function( editor ) {
        console.log('Loading Note Plugin')
        editor.addCommand( 'triggerNote', {
            exec: function( editor ) {
                console.log('triggerNote Clicked: ' + editor.container);
                var divNode = editor.container.$.parentNode.parentNode.parentNode;
                var event = new CustomEvent('noteevent');
                divNode.dispatchEvent(event);
            }
        });

        editor.ui.addButton( 'Note', {
            label: 'Trigger Note',
            command: 'triggerNote',
            toolbar: 'insert'
        });
    }
});

在

exec

方法中，我首先尝试获取

div

节点，该节点是角度组件的封闭元素，并在其上分派一个自定义事件。我希望这能被角度分量所吸收，但事实并非如此

---

我很好奇我的解决方案有什么问题。我也愿意接受让CKEditor 4插件与Angular对话的其他想法。

我也需要在单击CKEditor按钮时提醒我的Angular组件。我最终以与OP稍有不同的方式完成了这项工作。以下是我的解决方案：

在plugins/yourPlugin/dialogs/yourPlugin.js中：

CKEDITOR.dialog.add('myDialog', function (editor) {
  return {
    // Basic properties of the dialog window: title, minimum size.
    title: 'Add Link',
    minWidth: 400,
    minHeight: 70,

    // Dialog window content definition.
    contents: [
      {
        // Definition of the Basic Settings dialog tab (page).
        id: 'tab-basic',
        label: 'Basic Settings',

        // The tab content.
        elements: [
          {
            type: 'hbox',
            widths: ['75%', '25%'],
            children: [
              {
                type: 'text',
                align: 'left',
                id: 'url',
                label: 'URL',
                validate: CKEDITOR.dialog.validate.notEmpty('The link must have a URL.'),
                required: true,
                commit: function (data) {
                  data.url = this.getValue();
                },
              },
              {
                type: 'button',
                align: 'left',
                id: 'buttonId',
                label: 'Click me',
                title: 'My title',
                onClick: function () {
                  alert('Clicked: ' + this.id);
                  editor.fire('pageBrowser', { foo: 'bar' });
                },
              },
            ],
          },
        ],
      },
    ],
  };
});

然后在角度组件文件中：

var editor=CKEDITOR.replace（'editor1'）

//每当在编辑器中进行更改时，就会触发“更改”事件。 编辑器.on（'pageBrowser'，函数（evt）{

}))