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

Exploring JSON Parsing in JavaScript

Upon processing the following JSON data: foobar({ "kind": "youtube#searchListResponse", "etag": "\"I_8xdZu766_FSaexEaDXTIfEWc0/pHRM7wJ9wmWClTcY53S4FP4-Iho\"", "nextPageToken": "CAUQAA", "regionCode": "PL", "pageInfo": { "totalResults": 68 ...

javascriptjson

The Owl carousel animation fails to work in Chrome browser

I am currently customizing an HTML5 template that utilizes the Owl Carousel 1.3.2. My goal is to incorporate a smooth fade animation when transitioning between slider images. The code snippet below works perfectly in the Mozilla Browser, however, I'm ...

javascriptjquerycsshtmlowl-carousel

Utilize jQuery and JavaScript dynamically in an HTML document on iOS devices

Having some trouble with this code snippet and getting it to work as intended. - (void)viewDidLoad { [super viewDidLoad]; _webview.delegate = self; [_webview loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBun ...

javascriptjqueryhtmlios

What is the best way to manage communication with a database in a Node.js application?

I have a specific structure in my Express app: There is a db helper that I use to interact with my MariaDB database Here is the code snippet: var MariaSQL = require('mariasql'); var db = new MariaSQL(); var queries = { getUserByID : &a ...

javascriptdatabasenode.jsexpress

Modifying an object property within a state container array in React using Hooks' useState

As a React beginner, I decided to create a simple Todo app. This app allows users to add tasks, delete all tasks, or delete individual tasks. The Todo Form component consists of an input field and two buttons - one for adding a task and the other for dele ...

javascriptarraysreactjsobjectjsx

WebGL Error: An invalid operation occurred while trying to use the uniformMatrix4fv function. The error code [WebGL-00000A18072FEA00

Currently, I am working on an app that showcases 360° images and I rely on the BabylonJS library for this feature. The navigation bar helps me switch between different 360 locations within the application. However, whenever I try to change the 360 image ...

javascriptreactjsbabylonjsbabel-babylon

A guide on organizing nested object data in react-native

{ "crocodile":{ "age_in_years":"20", "name":"snapjaw", "country":"australia" }, "jaguar":{ "age_in_years":"8", "name&q ...

javascriptreactjsreact-nativejavascript-objects

Tips for moving a texture horizontally across a sphere using threejs

I have a 360 degree viewer tool. Is there a way to load a texture in a specific position that will rotate the original image by a certain number of degrees or units around the Y-axis without altering anything else about how the picture is displayed? If s ...

javascriptthree.js

The function of style.marginRight differs from that of style.marginLeft

One function aligns content to the left while the other doesn't align it to the right function openNavLeft() { document.getElementById("mySidenavLeft").style.width = "100vw"; document.getElementById("main").style.marginLeft = "100vw"; } function ...

javascriptjqueryhtmlcssbootstrap-4

Guide on utilizing Redux's Provider in React applications

I have been diving into the world of ReduxJS by closely following the documentation provided here. Towards the end of the document, it talks about utilizing the provider object. I have taken the step to wrap my App component in the provider as shown below ...

javascriptreactjsredux

Utilizing AJAX in Cordova to Generate Dynamic JavaScript Charts from JSON Data

Exploring the world of Cordova, I have delved into utilizing canvas Js for visualizing data in chart format. Following a helpful tutorial, I created a Json file and inserted the specified data as instructed, following each step diligently. The outcome matc ...

javascriptjsonajaxcordovacanvasjs

"Master the art of using express and jade to loop through data and generate dynamic

Hey there! I have a question regarding node.js. When working with express, we typically have multiple files such as app.js, index.jade, index.js, and server.js where most of the server logic resides. Let's say we have two objects defined in server.js ...

javascriptjquerynode.jsexpresspug

Choosing specific rows in a kogrid by clicking on a button within a column

My kogrid includes a single column with a view button for each row. I would like to show a popup containing the values of the selected row when the View button is clicked. How can I retrieve the values of the selected row in order to pass them into the p ...

javascript.netknockout.js

Looping through arrays within objects using NgFor in Angular 2/JavaScript

I have a custom object with data that I am iterating through using ngFor. Within this object, there is an array component that I also want to iterate through in a <li></li>. Currently, the output appears as one complete string within each < ...

javascriptarraysangularangular2-template

Error: An unexpected character was found in the Gulpfile.js

Having an issue in my Gulpfile.js: gulp.task('webpack', gulp.series(async () => { const option = yargs.argv.release ? "-p" : "-d"; execSync(`node_modules/webpack-cli/bin/cli.js ${option}`, { stdio: [null, process.stdout, proce ...

javascriptnode.jsnpmnode-modulespackage.json

Minimize the visibility of the variable on a larger scale

I have a nodejs app where I define global variables shared across multiple files. For example: //common.js async = requires("async"); isAuthenticated = function() { //... return false; }; //run.js require("common.js"); async.series([function () { i ...

javascriptnode.jsuglifyjs2

Creating images or PDFs from HTML with CSS filters: a guide

Looking for someone who has experience creating images or PDFs from HTML code. The HTML contains images with CSS filters such as sepia and grayscale. If you have worked on this type of project before, I would love to hear about your experience. <img cl ...

javascriptphpcsspdf-generation

You can definitely invoke a function within a React hook

This code snippet showcases a component utilizing Hooks in React Native import React, { useEffect, useState } from 'react'; import { StyleSheet, Text, View, TouchableOpacity, Animated } from 'react-native'; import CAStyles fro ...

javascriptreactjsreact-nativereact-hooks

The response in Express.js effortlessly transforms keys from snake_case to camelCase

I am currently working on a small project within my organization, and we have an Express.js based node application running. This application sends a JSON response with keys in snake_case format. On the other hand, we have another node application that cons ...

javascriptnode.jsexpress

Guide to accessing a nested and potentially optional object property with a default value and specifying its data type

Just a simple query here... my goal is to extract data.user.roles, but there's a possibility that data may be empty. In such cases, I want an empty array as the output. Additionally, I need to specify the type of user - which in this instance is any. ...

javascripttypescript