Guide on installing MathType plugins for CKEditor 5 in an Angular 8 environment

Encountering an issue while attempting to utilize MathType in CKEditor

Error message at ./node_modules/@wiris/mathtype-ckeditor5/src/integration.js 257:98 Module parse failed: Unexpected token (257:98) A proper loader may be required to handle this file type as currently no loaders are configured for this file. Refer to 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 at ./node_modules/@wiris/mathtype-html-integration-devkit/src/core.src.js 530:58 Module parse failed: Unexpected token (530:58) A suitable loader might be necessary to process this file type as there are currently no loaders configured for it. 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 at ./node_modules/@wiris/mathtype-html-integration-devkit/src/util.js 802:57 Module parse failed: Unexpected token (802:57) A suitable loader may be needed to handle this file type as no loaders are currently configured for it. Refer to 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 at ./node_modules/@wiris/mathtype-html-integration-devkit/telemeter-wasm/telemeter_wasm.js 922:56 Module parse failed: Unexpected token (922:56) A proper loader may be required to handle this file type as currently no loaders are configured for it. 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 Version 8.3.29 and Node version v14.20.0. Are there any packages similar to CKEditor with support for adding math symbols that are compatible with my dependencies?

angulartypescriptckeditor5mathtype

Answer №1

  1. Get the necessary packages installed:
npm install @ckeditor/ckeditor5-angular @wiris/mathtype-ckeditor5
  1. Include the plugin into your Angular module:
import { MathType } from '@wiris/mathtype-ckeditor5';

@NgModule({
  imports: [
    AngularEditorModule.forRoot({
      // ... other CKEditor configurations
      extraPlugins: [MathType],
    }),
  ],
  // ... other module declarations
})
export class AppModule {}
  1. Add the MathType button to the CKEditor toolbar:
<ckeditor [(ngModel)]="editorData" config="{ toolbar: { items: ['bold', 'italic', 'MathType'] } }"></ckeditor>
  1. (Optional) Customize MathType settings:

If you want to customize MathType behavior, you can modify the mathTypeParameters in your CKEditor configuration:

config: {
  // ... other configurations
  mathTypeParameters: {
    // Your preferred MathType settings here
  },
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

TypeScript - create an Interface that must have either the error field or the payload field, but

My Action type has the following requirements: MUST have a field type {String} CAN include a field payload {Object<string, any>} CAN include a field error {Error} Constraints: IF it contains the field payload THEN it cannot contain the field er ...

typescriptinterface

Using Array.push within a promise chain can produce unexpected results

I have developed a method that is supposed to retrieve a list of devices connected to the network that the client has access to. export const connectedDevicesCore = (vpnId: string, vpnAuthToken: string) => Service.listVPNConnectionsCore ...

javascriptnode.jsarraystypescriptpromise

What could be the reason why the getParentWhileKind method in ts-morph is not returning the anticipated parent of the

Utilizing ts-morph for code analysis, I am attempting to retrieve the parent CallExpression from a specific Identifier location. Despite using .getParentWhileKind(SyntaxKind.CallExpression), the function is returning a null value. Why is this happening? I ...

typescriptabstract-syntax-treets-morph

Strange activities observed during the management of state in react hooks, where the splice() function ends up eliminating the

My current setup involves maintaining a state to handle the addition of new JSX elements: const [display, setDisplay] = useState<IDisplay>({ BookingFormDropDown: [], } ); I have a function in onClick() which adds an elem ...

reactjstypescriptreact-hooks

Implementing dynamic secret key rotation for each environment during deployment with Angular, Jenkins, and Azure

My setup consists of multiple environments (development, testing, and production) where I utilize various 3rd-party services. Each environment requires different access tokens and secret keys for these services. For my CI/CD processes, I rely on Jenkins, ...

angularazurejenkinsazure-web-app-service

Avoiding redundant code in reactive forms

I have set up reactive forms for both login and registration. Here is the code for the Registration form: <div class="registration_wrap"> <div class="registration"> <form [formGroup]="form" novalidate> < ...

angularformsangular-material2reactive

Tips for dynamically altering the data type of an object in Angular depending on a certain condition

I'm currently in the process of developing an online store and facing challenges with integrating a dynamic form system that can adapt based on the type of product being added to the store. For instance, if I select the 'Clothing' category, ...

angulartypescript

Create a conditional statement based on the properties of an object

In one of my Typescript projects, I am faced with the task of constructing a dynamic 'if' statement based on the data received from an object. The number of conditions in this 'if' statement should match the number of properties present ...

arraystypescript

The module 'MatTableModule' could not be located within the '@angular/cdk/table' package during export

Having an issue with using where I'm getting the error message "export 'MatTableModule' was not found in '@angular/cdk/table'. Not sure what I might be doing wrong? You can find more details in my GitHub repository: https://githu ...

angularangular-material

There was an issue with the code: ERROR TypeError: Can't access the length of an undefined property in Angular 4

Encountering this particular issue: LeaderBoardComponent.html:27 ERROR TypeError: Cannot read property 'length' of undefined The error seems to be originating from the following HTML: <div *ngIf="leaderBoardTableData.length > 0"> With ...

angular

Implementing Asynchronous Custom Validators in Angular 4

I've encountered the following code snippet: HTML: <div [class]="new_workflow_row_class" id="new_workflow_row"> <div class="col-sm-6"> <label class="checkmark-container" i18n>New Workflow <input type="che ...

javascriptangularvalidation

Change the background color of mat-select to match the selected mat-option

<mat-form-field> <mat-select [formControlName]="name"> <mat-option [value]="option.id" [ngStyle]="{backgroundColor: option.color}" *ngFor="let option of list; let i = index" ...

angularangular-material

Event typeORM on afterUpdate in NestJS

After every update of my data in the log table, I want to insert an entry into another table. To achieve this, I have created an EntitySubscriberInterface. The event is triggering correctly, but the entity array does not include the updated id. async afte ...

angulartypescriptnestjsbackendtypeorm

Invoke the function when the user inputs text into the textbox

<textarea name="" id="" #text cols="30" (keydown)="WordCounter()" (change)="WordCounter()" rows="8" [(ngModel)]="user_text" placeholder="Type something here"></textare ...

javascriptangulartypescript

What could be causing the Typescript error when utilizing useContext in combination with React?

I am currently working on creating a Context using useContext with TypeScript. I have encapsulated a function in a separate file named MovieDetailProvider.tsx and included it as a wrapper in my App.tsx file. import { Context, MovieObject } from '../in ...

reactjstypescriptuse-stateuse-context

To handle a 400 error in the server side of a NextJS application, we can detect when it

I'm facing a situation where I have set up a server-side route /auth/refresh to handle token refreshing. The process involves sending a Post request from the NextJS client side with the current token, which is then searched for on the server. If the t ...

javascripttypescripterror-handlingnext.js

Troubleshooting TS Errors in Vue 3 and Vite with Typescript Integration

Currently experimenting with Vue 3, Vite, and TypeScript to build a Vue project. The configuration process has proven to be quite challenging. Despite consulting various documentation sources, I have not been successful in achieving my desired outcome. My ...

typescriptvue.jsvite

Leveraging non-ionic-native Cordova plugin

I'm currently working on integrating the [This]https://github.com/louisbl/cordova-plugin-locationservices plugin into my Ionic 4 app. Since it's a non-Ionic-native plugin, what is the proper way to call its functions within my TypeScript code? ...

angulartypescriptcordovaionic-frameworkionic4

`Inconsistent copying behavior across Chrome and Mozilla browsers for TypeScript`

I am facing an issue with copying the content of a textarea component to the clipboard. I have noticed that there are two different outcomes when running the code on Mozilla browser and Chrome: Below is my TypeScript code: 'HTML': <button ( ...

angulargoogle-chromemozilla

Formatting decimals with dots in Angular using the decimal pipe

When using the Angular(4) decimal pipe, I noticed that dots are shown with numbers that have more than 4 digits. However, when the number has exactly 4 digits, the dot is not displayed. For example: <td>USD {{amount| number: '1.2-2'}} < ...

javascriptangulartypescript