如何在angular 8中安装CKEditor 5的插件？

Question

我正在尝试安装一个名为Math equations and chemical formulas的插件，用于在Angular 8的CKEditor5中输入LaTex

。如何在CKEditor 5中添加插件和工具栏

我尝试在CKEditor标签中添加配置，并在ts文件中添加插件和工具栏详细信息

ckeditor.component.ts

import {Component, OnInit} from '@angular/core';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import MathType from '@wiris/mathtype-ckeditor5';

ClassicEditor
  .create(document.querySelector('#editor'), {
    plugins: [MathType],
    toolbar: ['MathType']
  }).then(editor => {
  console.log('Editor was initialized', editor);
})
  .catch(error => {
    console.error(error);
  });

@Component({
  selector: 'app-ckeditor',
  templateUrl: './ckeditor.component.html',
  styleUrls: ['./ckeditor.component.scss']
})
export class CkeditorComponent implements OnInit {
  public Editor = ClassicEditor;


  constructor() { }


  ngOnInit() {  }
}

ckeditor.component.html

<ckeditor id="editor"
  [editor]="Editor">
</ckeditor>

我希望看到CKEditor 5带有支持latex输入的数学方程式工具栏

编辑:我目前收到这个错误，我使用的版本是@wiris/mathtype-ckeditor5@7.17.0

:4200/main.js:482 TypeError: Cannot read property 'getAttribute' of null
    at IconView._updateXMLContent (:4200/vendor.js:139959)
    at IconView.render (:4200/vendor.js:139935)
    at IconView.<anonymous> (:4200/vendor.js:148840)
    at IconView.fire (:4200/vendor.js:146753)
    at IconView.<computed> [as render] (:4200/vendor.js:148844)
    at ViewCollection.<anonymous> (:4200/vendor.js:143322)
    at ViewCollection.fire (:4200/vendor.js:146753)
    at ViewCollection.add (:4200/vendor.js:143914)
    at ButtonView.render (:4200/vendor.js:138797)
    at ButtonView.<anonymous> (:4200/vendor.js:148840)

我所能看到的只有一个叫做“富文本编辑器”的文本和一个不接受任何输入的空白文本字段。屏幕截图here

Answer 1

document.querySelector("#editor")需要一些id为editor的元素，但是您引入了一个无法通过查询选择器找到的template variable，因此尝试执行以下操作：

<div id="editor">
</div>

Answer 2

请查看此答案https://stackoverflow.com/a/59225002/6465520，我描述了如何使用插件创建自定义构建