How to install MathType plugins for CKEditor 5 in angular 8?

Question

I'm facing this issue, While try to use MathType in CKEditor

ERROR in ./node_modules/@wiris/mathtype-ckeditor5/src/integration.js 257:98 Module parse failed: Unexpected token (257:98) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | // When Latex is next to image/formula.

    if (latexRange.startContainer.nodeType === 3 && latexRange.startContainer.previousSibling?.nodeType === 1) {

| // Get the position of the latex to be replaced. | let latexEdited = '$$' +(Latex.getLatexFromMathML(MathML.safeXmlDecode(this.core.editionProperties.temporalImage.dataset.mathml))) + '$$';
ERROR in ./node_modules/@wiris/mathtype-html-integration-devkit/src/core.src.js 530:58 Module parse failed: Unexpected token (530:58) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | item.endPosition); | } else {

  mathmlOrigin = this.editionProperties.temporalImage?.dataset.mathml;

| if (element && element.nodeName.toLowerCase() === 'img') { // Editor empty, formula has been erased on edit. | // There are editors (e.g: CKEditor) that put attributes in images. ERROR in ./node_modules/@wiris/mathtype-html-integration-devkit/src/util.js 802:57 Module parse failed: Unexpected token (802:57) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | return Util.getSelectedItem(target, isIframe, forceGetSelection); | }

        else if (node.childNodes[position].classList?.contains('Wirisformula')) {

| if ((position > 0 && node.childNodes[position - 1].classList.contains('Wirisformula')) || position === 0 ) { | var emptySpan = document.createElement('span'); ERROR in ./node_modules/@wiris/mathtype-html-integration-devkit/telemeter-wasm/telemeter_wasm.js 922:56 Module parse failed: Unexpected token (922:56) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | if (typeof input === 'undefined') {

    input = new URL('telemeter_wasm_bg.wasm', import.meta.url);

| } | const imports = __wbg_get_imports();

My angular project is in Version 8.3.29 and the Node version v14.20.0. Is there any packages available like CkEditor which has option to add math symbols which compatible to my dependencies.

Answer 1

1. Install necessary packages:

npm install @ckeditor/ckeditor5-angular @wiris/mathtype-ckeditor5

2. Import the plugin in your Angular module:

import { MathType } from '@wiris/mathtype-ckeditor5';

@NgModule({
  imports: [
    AngularEditorModule.forRoot({
      // ... other CKEditor configurations
      extraPlugins: [MathType],
    }),
  ],
  // ... other module declarations
})
export class AppModule {}

3. Add the MathType button to the CKEditor toolbar:

<ckeditor [(ngModel)]="editorData" config="{ toolbar: { items: ['bold', 'italic', 'MathType'] } }"></ckeditor>

4. (Optional) Configure MathType properties:

If you need to configure specific MathType behavior, you can add the mathTypeParameters property to your CKEditor configuration:

config: {
  // ... other configurations
  mathTypeParameters: {
    // Your MathType configuration options
  },
}