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

Question

我正在尝试安装名为Math equations and chemical formulas的插件，以便在Angular 8的CKEditor5中输入LaTex。>

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

我尝试在HTML的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
编辑：我当前收到此错误，我正在使用的版本为@ 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)

我所能看到的就是一个叫做'Rich Text Editor'的文本和一个不接受任何输入的空白​​文本字段。屏幕截图here

我正在尝试安装名为Math Equations and Chemistry Formulas的插件，以便在Angular 8的CKEditor5中输入LaTex。我如何在CKEditor 5中添加该插件和工具栏，我尝试添加...

Answer 1

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

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