Как установить плагины для CKEditor 5 в Angular 8? - PullRequest
Новая
       16

Как установить плагины для CKEditor 5 в Angular 8?

0 голосов
/ 21 октября 2019

Я пытаюсь установить плагин под названием Математические уравнения и химические формулы для ввода LaTex в CKEditor5 в Angular 8

. Как добавить этот плагин и панель инструментов в CKEditor 5

Я попытался добавить конфигурацию в тег CKEditor в HTML и добавить плагины и подробности панели инструментов в файл 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» и пустое текстовое поле, которое не требует ввода. снимок экрана здесь

1 Ответ

0 голосов
/ 21 октября 2019

document.querySelector("#editor") ожидает некоторый элемент с идентификатором editor, но вы ввели template variable, который нельзя найти с помощью селектора запросов, поэтому попробуйте это: 

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