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

Tips for presenting SVG symbols using Interpolation within Angular 7 from a JSON document

When it comes to displaying content in Angular 7 components, JSON is used. However, I have encountered a problem while trying to incorporate SVG icons from our UX team into the component using JSON. Using the img tag restricts me from applying a CSS class ...

jsonangularsvg

What is the process for retrieving a string value from a URL?

Here is the link to my page: http://localhost:4200/#/home/jobmanager/status Can someone help me figure out how to extract the "status" from the URL as a string in TypeScript (.ts file)? For example: this.getJobs("STATUS_HERE"); I need to replace "STATU ...

angulartypescriptangular8

Quickly send off an Angular 4 HTTP POST request and move on

I've been experimenting with making a fire and forget request, but none of my attempts seem to be working as expected. The situation is that after completing one subscribable request, I need to redirect to another page. However, before the redirectio ...

angularhttp-post

The success method in the observable is failing to trigger

Could someone explain why the () success method is not triggering? It seems to be working fine when using forkjoin(). Shouldn't the success method fire every time, similar to a final method in a try-catch block? Note: Inline comments should also be c ...

javascriptangularobservable

Using dual ngFor in Angular 4: A step-by-step guide

I am encountering an issue in my Angular 4 project where I receive two different arrays in response to a server request, and I want to utilize both of them in the template. Here is my controller code: this.contractService.getOwnerContract() .subscribe( ...

htmlangular

The GraphQl Code Generator fails to correctly generate the graphql() function in Next.js applications

While working on my next.js project, I integrated GraphQL to generate types for queries. However, the code generator is not functioning properly and displaying an error message: "The query argument is unknown! Please regenerate the types." within the gql.t ...

reactjstypescriptnext.jsgraphqlgraphql-codegen

How to navigate to the bottom of a webpage with Angular 4 using TypeScript's onClick event

Within my component, I have a template that looks like the following. When this div is clicked, the intention is to scroll to the bottom of the page. `<section><div onclick='scrollDown()'>Goto Reports</div></section><d ...

angulartypescriptscroll

Transmitting JSON and FormData between Angular and Spring

Angular Tutorial processRegistration(user: any, file: File): Observable<any>{ let formData = new FormData(); formData.append("user", JSON.stringify({username:'User'})); formData.append("file", file); return this. ...

angularspring

Enhance your material-ui component using TypeScript functionality

Exploring ways to enhance the Material-ui Button component by introducing new props. The objective is to introduce a new prop called fontSize with three size options - small, medium, large. <Button variant="outlined" color="primary" ...

reactjstypescriptmaterial-ui

Using TypeScript along with the "this" parameter

Hi there, I'm encountering an issue with the code snippet below. It keeps throwing an error message that says "Property 'weatherData' does not exist on type 'XMLHttpRequest'." The purpose of this code is to display weather informat ...

typescript

Angular 2 can efficiently generate multiple HTTP requests simultaneously from a single HTTP request

Backend API's: url: [ { "name": "ABC", "occupation": "Student", "address_url": "http://www.sample.com/address/person=hgjgjgyyfhg" }, { "name": "ABC1", "occupation": "Carpenter", "address ...

javascriptangularhttprequest

encountering a problem with retrieving the result of a DOM display

private scores = [] private highestScore: number private studentStanding private studentInformation: any[] = [ { "name": "rajiv", "marks": { "Maths": 18, "English": 21, "Science": 45 }, "rollNumber": "KV2017-5A2" }, { "n ...

javascriptarraysjsonangular

Ensuring consistency between TypeScript .d.ts and .js files

When working with these definitions: https://github.com/borisyankov/DefinitelyTyped If I am using angularJS 1.3.14, how can I be certain that there is a correct definition for that specific version of Angular? How can I ensure that the DefinitelyTyped *. ...

javascriptangularjstypescript

Learn how to dynamically import external modules or plugins using the import() functionality of TypeScript 2.4 within the production script generated by Angular CLI

Utilizing the typescript 2.4 [import()][1] feature has proven to be effective for dynamically loading modules. Testing this functionality has shown positive results, especially when importing modules and components located within the same directory. Howev ...

javascriptangulartypescriptimport

Potential Null Object in Typescript Mongoose: A Concern

Encountering an issue while attempting to locate my user model: Object is possibly 'null'. I would like to find a solution that does not involve suppressing TypeScript's strict rule. const { email, password } = req.body; const user = awai ...

typescriptexpressmongoose

Converting React to Typescript and refactoring it leads to an issue where the property 'readOnly' is not recognized on the type 'IntrinsicAttributes & InputProps & { children?: ReactNode; }'

I'm currently in the process of refactoring an application using Typescript. Everything is going smoothly except for one particular component. I am utilizing the Input component from the library material-ui. import {Input} from "material-ui"; class ...

reactjstypescriptmaterial-ui

Angular site deployed to Firebase Hosting encounters a connection issue with ERR_CONNECTION_REFUSED - could this be due to a

I recently tested an admin template from angular-templates.io and everything was working perfectly fine in the production build. I then uploaded it to Firebase Hosting specifying dist/browser (which was created during the production build). However, upon l ...

angularfirebasefirebase-hosting

What is the method for implementing type notation with `React.useState`?

Currently working with React 16.8.3 and hooks, I am trying to implement React.useState type Mode = 'confirm' | 'deny' type Option = Number | null const [mode, setMode] = React.useState('confirm') const [option, setOption] ...

javascriptreactjstypescriptreact-hooks

Generating an array of keys from duplicated values in Typescript

My data is structured in the following array format: { itemTitle: 'value example', itemType: 'value example', itemDescription: 'value example', itemFamily: 'Asset', }, { itemTitle: 'val ...

javascriptarraystypescript

Error: Unable to parse string in URI within vscode API

Console LOG displays: \Users\skhan\Library\Application Support\Code\User\summary.txt The loop is used to replace the slashes. It works fine in Windows but not in Ubuntu and Mac. This is an example on OSX 10.11.6. Howev ...

node.jstypescriptvisual-studio-codevscode-extensions