Error throwing when attempting to use additional plugins in Angular CKEditor

I have been attempting to utilize the angular ckeditor extension found at:

https://github.com/lemonde/angular-ckeditor

UPDATE: I have already injected 'ckeditor' into the app modules.

Within my partial html, I am including the following directive:

<div ckeditor="data_options" ng-model="note.note_data" ready="onReady()"></div>

and in the controller, I am adding these configuration options:

$scope.data_options = {
            lang: 'en',
            allowedContent: true,
            entities: false,
            extraPlugins: ['mathjax'],
            mathJaxClass: 'm-equation',
            mathJaxLib: 'http://cdn.mathjax.org/mathjax/2.6-latest/MathJax.js?config=TeX-AMS_HTML'
        };

However, I keep encountering this error in the browser:

Uncaught TypeError: d.replace is not a functionA @ ckeditor.js:249(anonymous function) @ ckeditor.js:248(anonymous function) @ ckeditor.js:475(anonymous function) @ ckeditor.js:236e @ ckeditor.js:231A @ ckeditor.js:231r @ ckeditor.js:231(anonymous function) @ ckeditor.js:232

Could there be an error on my end or perhaps it's a bug? Are there any other alternatives available for using an angular wysiwyg editor with mathjax (tex/latex) support?

javascriptangularjsckeditorwysiwygmathjax

Answer №1

It is important to note that the extraPlugins attribute must be a string and not an array in the following format:

$scope.data_options = {
            lang: 'en',
            allowedContent: true,
            entities: false,
            extraPlugins: 'mathjax',
            mathJaxClass: 'm-equation',
            mathJaxLib: 'http://cdn.mathjax.org/mathjax/2.6-latest/MathJax.js?config=TeX-AMS_HTML'
        };

If you need to include multiple extra plugins, simply separate them with commas like this:

extraPlugins: 'plugin1,plugin2,plugin2'

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

Having trouble implementing min and max date validation in Angular UI-Bootstrap datepicker with UI-Bootstrap version 1.3.3

My goal is to implement validation in my datepicker, preventing the user from selecting a date within 30 days before or after the current date. Here's the code snippet I'm currently using for the datepicker: <div class="form-group" ng-class=" ...

javascriptangularjsvalidationdate

How can the input validation be displayed in Ajax when the user interacts with it?

When utilizing Ajax, I only want to display validation for the input field that the user is interacting with, not all validations at once. Currently, my script shows all validations simultaneously when any input is filled out. How can I modify my code so t ...

javascriptjqueryajax

Assigning value to a member variable in a TypeScript Angular class

Currently, I am in the process of learning Angular. To enhance my skills, I am developing a simple web application using Angular and Spring Boot. One challenge I encountered is assigning a variable to the member variable of a Class. import { Injectable } f ...

javascriptangulartypescript

Tips on sending asynchronous requests to a PHP page using jQuery AJAX

As a newcomer to web development, I am working on creating a social networking website for a college project. One feature I want to implement is updating the message count in the menu every time there is a new message in the database for the user (similar ...

javascriptphpjqueryhtmlajax

"Learn how to implement a feature that allows for the acceptance of string input in discord

I am struggling to find the right solution for my issue. I am trying to implement a change_nick command but unsure about what type/number option to utilize. This is how I'm creating my command: commands.create ( { ...

javascriptnode.jsdiscord.js

What is the syntax for inserting a text (value) into a text input field in HTML using PHP?

I'm having trouble getting the input field to populate with "Hello" when the button is clicked. I've checked for a solution, but can't seem to find one. Any help would be appreciated. Thank you. <!DOCTYPE html> <html> <head&g ...

javascriptphpinput

Eliminate any line breaks from the information retrieved from the node event process.stdin.on("data") function

I've been struggling to find a solution to this issue. No matter what approach I take, I can't seem to remove the new line character at the end of my string. Take a look at my code below. I attempted using str.replace() in an effort to eliminate ...

javascriptregexnode.js

Do JavaScript Promises operate asynchronously?

Can we clarify if JavaScript Promise is asynchronous? I've been researching Promise and async programming, particularly with ajax requests. If Promise isn't inherently async, how can we make it so? For instance, consider a function that encapsul ...

javascriptasynchronouspromise

Having issue with jQuery popup not functioning correctly on the right side with the contact form. Is there anyone who knows how

Looking for a side slide popup that only accepts paragraph content? Want to add a contact form to it? Check out this fiddle - link here For a working example, visit - $(function() { // Slide from right to left $('#test2').PopupLayer({ ...

javascriptjqueryhtmlcss

Experience the power of Vue Google Chart - Geochart where the chart refreshes seamlessly with data updates, although the legend seems to disappear

I have integrated vue google charts into my nuxt project. Whenever I select a different date, the data gets updated and the computed method in my geochart component correctly reads the new data. However, the legend or color bar at the bottom does not funct ...

javascriptvue.jsnuxt.jsvuexreact-google-charts

Can a sophisticated text editor be utilized without a content management system?

Many website builders utilize rich text editors as plugins to enhance content creation, such as in CMS platforms like Joomla and WordPress. However, can these same editors be easily integrated into a custom website built from scratch using just HTML, PHP ...

javascripthtmltextcontent-management-systemeditor

Exploring the process of iterating through arrays within an object in vue.js using the v-for directive

Is there a way to iterate through an output object using the v-for template in Vue.js? new Vue({ el: app, data: { output: { player: [1, 5, 61, 98, 15, 315, 154, 65], monster: [14, 165, 113, 19, 22], }, }, }); <script src= ...

javascriptvue.js

"Is there a way to retrieve global variables within the asynchronous callback function of Google Autocomplete

Currently, I am engaged in an angular project that involves the utilization of the leaflet-google-places-autocomplete API alongside the leaflet framework. The main objective is to extract location data from the API and apply it in other sections of my com ...

angularjscallbackleafletasynccallbackgoogle-places-autocomplete

Utilizing MVC and AngularJS in a Single Page Application

I am embarking on my very first Angular application, which will function as a single page application in conjunction with MVC. Attempting to create a sample application featuring two links has presented some challenges, detailed below. I have opted for the ...

angularjsasp.net-mvcsingle-page-application

How can AngularJS achieve ng-repeat functionality with multiple variables similar to ng-init?

When using ng-init, you have the ability to utilize multiple variables: ng-init="var1=value1; var2=value2" I attempted something similar with ng-repeat but unfortunately it did not work as expected ng-repeat= "var1 in var1s; var2 in var2s" Is there a p ...

javascriptangularjs

Find the time matching in a time string using Javascript

I need to extract the time in the format "HH:MM:SS" from a string like "HH:MM:SS CEST". How can I achieve this without including any additional strings such as CEST? ...

javascriptregextimematch

Enhancing communication between controllers and HTML in AngularJS through scope updates

I have created a new functionality within a telerik grid that tracks the ID of a record. When a row is selected in the grid, the associated service updates the data successfully. However, I am facing an issue where the controller responsible for navigation ...

angularjs

Guide on organizing an array of objects by the sub-part of their property values

Is there a way to order the elements in the given array based on a custom criteria related to the last 3 letters of 'prop2' in descending order? The specific order should be 'ABR', 'FDE', 'ZFR'. Another array needs t ...

javascriptarrays

What is the best way to toggle the visibility of fields on a modal in a Ruby on Rails

I am working on an application that utilizes Rails 4.1 and Ruby 2.1.2. The show.html.erb view for the Assignment Model in this application is as follows: <h1><%= "#{'Source URL'}"%> <div class="source-url"><%= @assignment.so ...

javascriptjqueryruby-on-railscoffeescript

Issues with external javascript link functionality

I'm having trouble connecting my external JavaScript file to my HTML code. I'm attempting to concatenate two strings using an input function and then display the new string in the empty text field. What could be causing this issue? Appreciate an ...

javascripthtmlhyperlinkexternal