0

I'm trying to install a plugin called Math equations and chemical formulas for entering LaTex in CKEditor5 in Angular 8

. How do I add that plugin and toolbar in CKEditor 5

I tried adding the configuration in CKEditor tag in HTML and add plugins and toolbar details in ts file

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>

I expect to see the CKEditor 5 with the math equations toolbar which supports latex input

Edit: i am currently receiving this error, the version im using is @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)

all i can see is a text called 'Rich Text Editor' and a blank textfield which does not take any input. screen shot here

Yunis Maharjan
  • 1
  • 1
  • 2

2 Answers2

0

document.querySelector("#editor") expects some element with id editor, but you introduced a template variable which cannot be finded through query selector, so try this:

<div id="editor">
</div>
Mustahsan
  • 3,852
  • 1
  • 18
  • 34
  • Thank you for your reply, I was able to dodge that error after replacing #editor with id="editor", but i received another error that says ``` ERROR in ./node_modules/@wiris/mathtype-ckeditor5/src/plugin.js Module not found: Error: Can't resolve '@ckeditor/ckeditor5-ui/src/button/buttonview' in '/home/yunis/Documents/Misc/Latex Catex/latex/node_modules/@wiris/mathtype-ckeditor5/src' ``` i think its a version mismatch, im using @wiris/mathtype-ckeditor5@7.17.0 – Yunis Maharjan Oct 22 '19 at 05:29
  • @YunisMaharjan can you produce this example on stackblitz.com, so it will be easier for us to help you – Mustahsan Oct 22 '19 at 05:31
0

Check this answer out https://stackoverflow.com/a/59225002/6465520, I described how to create custom build with plugins

Maksim Vorontsov
  • 799
  • 8
  • 18