如何在 Angular 8 中安装 CKEditor 5 的插件？答案

【问题标题】：How to install plugins for CKEditor 5 in angular 8?如何在 Angular 8 中安装 CKEditor 5 的插件？
【发布时间】：2020-02-17 12:25:50
【问题描述】：

我正在尝试安装一个名为 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)

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

【问题讨论】：

标签： angular latex ckeditor5

【解决方案1】：

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

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

【讨论】：

感谢您的回复，在将#editor 替换为 id="editor" 后，我能够避开该错误，但我收到另一个错误，显示 ``` ERROR in ./node_modules/@wiris /mathtype-ckeditor5/src/plugin.js 未找到模块：错误：无法解析 '/home/yunis/Documents/Misc/Latex Catex/latex/ 中的 '@ckeditor/ckeditor5-ui/src/button/buttonview' node_modules/@wiris/mathtype-ckeditor5/src' ``` 我认为它的版本不匹配，我正在使用@wiris/mathtype-ckeditor5@7.17.0
@YunisMaharjan 你能在stackblitz.com上制作这个例子吗，这样我们会更容易帮助你

【解决方案2】：

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

【讨论】：