Issues with CKEDITOR in Internet Explorer when multiple instances are used with different configuration files

My current challenge involves placing multiple CKEDITOR instances on a single page, each loading a different configuration file. While it functions correctly in Firefox (FF), Internet Explorer (IE) seems to apply the config file from the last instance on the page to all instances. Each instance has a unique base element name assigned to it. The code snippet below shows how I am adding these instances, with varying customConfig, width, and height values for each one.

CKEDITOR.replace(document.form1.elementName,
                                {
                                    customConfig: 'customConfigFile.js',
                                    width: '500px',
                                    height: '200px'
                                }
);

I'm not sure where I'm going wrong. It's not feasible for me to directly specify the settings from the config files on the page because there is an oninstanceready call included in part of the config file. So far, the only workaround I have found is to delay the initialization of each instance using setTimeout, which is less than ideal. Do you have any suggestions or ideas on how to resolve this issue?

javascriptckeditor

Answer №1

To ensure the proper loading of the element before replacing it, try placing the code at the bottom of your page following the closing body tag. You only need to specify the name of the config file, not the full path as some forums may suggest. I faced a similar issue and this method resolved it for me. Remember to include a starting quote before specifying the file name.

CKEDITOR.replace(   'elementname',
   {
       customConfig : 'customConfigFile.js',
       width :   '500px',
       height: '200px'
   }
);

Answer №2

Apparently @Danny Cohn posted this question on the CKEditor community forum as well. However, the response he received there did not provide a solution to the issue at hand.

In my own experience, I have found that when multiple ckeditors are present on a single page, each with its own customConfig specified, the settings of the last editor take precedence. This final editor must include all the necessary data (such as toolbars) for not only itself but also the other editors on the page in order for everything to function properly.

Answer №3

We are aware of this issue.

For more information, check out: .

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

The error message "item is not defined in nodejs" indicates that the variable

I am facing an issue while trying to retrieve data from a JSON file using Node.js and Express. I have defined the methods with exports, but I keep getting errors in my browser. I am unsure why it is not functioning correctly, as I have specified the metho ...

javascriptnode.jsjsonexpressvisual-studio-code

The primeVue menubar's active/focused item highlighting feature is not functioning correctly

Currently, we are in the process of developing an electron-based application with the front end primarily coded using Vue.js and primeVue. As a novice, I am encountering issues with the menubar component from primeVue. The problem is that no matter which i ...

javascriptvue.jsprimevue

Bring back object categories when pressing the previous button on Firefox

When working with a form, I start off with an input element that has the "unfilled" class. As the user fills out the form, I use dynamic code to remove this class. After the form is submitted, there is a redirect to another page. If I click the "back" ...

javascriptjquerycss

Graph not displaying dates on the x-axis in flot chart

I've been attempting to plot the x-axis in a Flot chart with dates. I've tried configuring the x-axis and using JavaScript EPOCH, but have had no success so far. Here's a snippet of my code: <?php foreach($data[0] as $i => $d){ ...

javascriptphpflot

Adjusting the inner div dimensions to be 100% of the body's size without relying on the parent div using JavaScript

I have a main layer with multiple layers stacked on top of it. I need the second layer to extend its width to match the body's width. Main Project: http://example.com What I've tried: I looked into: Solution for matching div width with body ...

javascriptjqueryhtmlcss

Is there a way for me to retrieve props that have been passed through the Vue router within a Vue component?

I have configured a route as shown below: { path: 'fit-details', name: 'fit-details', component: Fitment, props: true }, I am passing props via the route using data from the state: this.$router.push({ path: 'fit-details&a ...

javascriptvue.jsvue-router

Customizing the background color in TurnJSIncorporating

Recently, I encountered a problem that has left me puzzled. Despite searching online for help, I have not been able to find a solution. The issue lies with the basic code provided on the official page of the TurnJS script. <div id="flipbook"> <di ...

javascripthtmlcssturnjs

jQuery Datatables have trouble accessing specific row information when the table is set to be responsive

Currently, I'm utilizing the jQuery DataTables plugin along with the responsive addon to dynamically display and hide columns based on the size of the browser window. One of the columns is labeled as Actions, which permits users to edit a record by c ...

javascriptjqueryhtmldatatables

Why won't NextJS Image elements render on iOS 16 when they are not in the viewport initially?

I opted to implement NextJS for enhanced routing capabilities and image optimization. However, I encountered an issue with certain images failing to load properly on iOS devices. The problem arises within a scrollable horizontal container featuring Product ...

javascriptimagenext.jssafarilazy-loading

Enhance vue.js by adding your own custom filters

I am currently working with Vue.js integrated with Laravel using Elixir and Browserify. I am trying to create custom global filters, each in their own separate file. Despite following the documentation, I am encountering an issue where I receive the follow ...

javascriptbrowserifyjavascript-frameworkvue.jslaravel-elixir

premature submission alert on button press

I'm encountering an issue where my form is being submitted prematurely when I click on the button. The desired behavior is for the button to create a textarea upon clicking, allowing me to write in it before submitting by clicking the button again. Ho ...

javascripthtmlbuttonevent-listener

Is there a hover function in jQuery that works with both mouseenter and mouseout events?

I've been facing a slight issue with a list of items using the <li> element. I have a plugin running that dynamically adds a data-tag ID to the data-* attribute of these items. As a result, all items are dynamically added and another function I ...

javascriptjquery

Encountering issues while trying to install Java using NPM

Encountering errors when attempting to run the following command to install java dependencies for NPM. NPM install -g java In need of assistance to fix this error. C:\WINDOWS\system32>npm i -g java [email protected] install C:\D ...

javascriptjavanode.jsnpmnpm-install

Navigating through various versions of admin-on-rest can be perplexing

This question is likely directed towards maintainers. Currently, I am using the stable version of admin-on-rest (https://www.npmjs.com/package/admin-on-rest) which is at 1.3.4. It seems that the main project repository is only receiving bug fixes, while ...

javascriptreactjsadmin-on-rest

Steps for sending a form with jQuery's submit method1. Start

Below is the jquery code that I have written: $(document).ready(function () { $('.bar_dropdown').on('change', function() { console.log("dropdown changed") $('#bar_graph_form_id').submit(function(e ...

javascriptpythonjquerydjangoajax

Key factors to keep in mind when comparing JavaScript dates: months

Check the dates and determine if the enddate refers to the following month by returning a boolean value. Example startdate = January 15, 2020 enddate = February 02, 2020 Output : enddate is a future month startdate = January 15, 2020 enddate = January 2 ...

javascriptnode.jstypescript

Issue with utilizing display: table and overflow: hidden in Internet Explorer and Firefox, functioning properly on Webkit and Blink

JSFiddle : http://jsfiddle.net/h7xvr2t9/2/ I have been experimenting with ways to achieve some effects: Animating a hidden DIV to slide into view from below a visible container Centering text/image on a link to trigger the animation HTML <div clas ...

javascripthtmlcss

Establishing a global variable in Cypress through a function

My current workflow involves the following steps: 1) Extracting a field value from one page: var myID; cy.get('#MYID'). then(($txt) => { myID= $txt.text(); }) .should('not.equal', null); 2) Mo ...

javascriptasynchronouscypress

The quiet harmony of FeathersJS and Socket.io as they attentively listen to events is

I've been working hard to get everything set up and running smoothly, but it seems like I'm stuck on the last piece of the puzzle. Despite following the documentation closely, I can't seem to figure out what I'm missing. Here is the @an ...

javascriptnode.jssocket.iofeathersjs

Obtain the current date using Moment JS in JavaScript

Here is a scenario with code : let currentTime = moment(); console.log(currentTime.format()); // 2019-11-25T20:23:50+02:00 console.log(currentTime.toDate()); // 2019-11-25T18:23:50.916Z After applying the timezone change on Heroku using the command ...

javascriptnode.jsdateherokumomentjs