Modify the CSS of CKEditor using JavaScript after the instance has been initialized

When creating a CKEditor instance, the following steps are typically taken:

require_once 'ckeditor/ckeditor.php';
$CK = new CKeditor();
$CK->basePath = './ckeditor/';
$config = array();
echo '<textarea name="content" id="content"></textarea>';
$config['contentsCss'] = 'style1.css';
$config['ImageUpload'] = false;
$config['toolbar'] = 'Basic';
$events = array();
$CK->replace('content', $config, $events);

But what if you want to change configuration details, like the "contentsCss," via JavaScript after the instance has already been created? Is this possible?

One approach that may come to mind is to use the following JavaScript code (although it may not work as expected):

<a href="#" onclick="CKEDITOR.instances.content.config.toolbar = 'Full'; return false;">change toolbar style</a>

Answer №1

After experimenting with various approaches, I finally arrived at the following solution:

<script type="text/javascript>
function updateCKEditor() {
    var editor = CKEDITOR.instances.content;
    if (editor) {
        editor.destroy(true);
    }
    var configOptions = { skin : ABC, toolbar : 'Simple', contentsCss : '' };
    CKEDITOR.replace('content', configOptions);
}
</script>

Answer №2

Here is a possible solution:

Utilize the following code snippet:
CKEDITOR.instances.editorId.window.$.document.getElementsByTagName("link")[0].href = 'new/path/style.css';

Replace "editorId" with the actual ID of your editor, and make sure to adjust the index number if needed for your stylesheet.

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

Is there a way to adjust the saturation and desaturation of an image using CSS?

Issue Update After further testing, I have discovered that the desaturation effect is only functioning properly in Chrome. How can I adjust it to work in other browsers such as FF and IE? (Title modified) Currently, I am working on turning a color image ...

IE - Adjusting the Width of the Vertical Spry Menu Bar

As I delve into the world of web design using Dreamweaver, I find myself faced with some challenges as a beginner. One specific issue I'm encountering is related to a vertical Spry Menu Bar on my website that functions well in most browsers except for ...

Methods for presenting text from an object array using Angular

I'm running into a bit of trouble with getting my text to show up properly in my code. In the HTML, I have <td>{{cabinetDetails.cabinetType}}</td> and my data source is set as $scope.cabinetDetails = [{cabinetType: 'panel'}]; De ...

Tips for creating a clickable A href link in the menu bar that triggers an accordion to open in the body when clicked - html

Is there a way to open the first accordion when clicking on the "open 1st accordion" link, and do the same for the second link? The accordions themselves work perfectly fine, I just need a way to trigger them from outside their scope by clicking on links i ...

What is the best way to retrieve an ID when parsing JSON recursively?

Could you provide guidance on how to retrieve the IDs of all children when parsing JSON data? I have attempted to use a recursive function, but it seems to be calling infinitely. For reference, here is my code snippet: http://jsfiddle.net/Ds8vQ/ for(var ...

Execute a command and direct the input/output to designated files

My goal is to execute a child process in the background while also modifying its output (like adding timestamps) and directing it to specific files. Currently, I am approaching this task as follows: try { var out = fs.createWriteStream(`${this.logdir}/$ ...

Using Node.js for HTML redirections involves creating routes and setting

I am currently attempting to connect my Node.js API with my HTML pages. For the most part, everything is functioning correctly, but I have encountered some confusion along the way. Is there a more efficient method for redirecting an HTML page? Typically, ...

Remove the most recent file in a MongoDB collection using a DELETE request

As I delve into the world of REST APIs, one task on my to-do list is to delete the last POST in my mongoDB collection using a DELETE route with mongoose. Despite searching for answers, none seem to provide guidance on achieving this deletion through a rout ...

Encountering silence: React JS fetch call left unanswered by Sinatra server

Exploring the realms of Sinatra and React JS, I am venturing into making a GET call from my React website to a Sinatra server in order to display plain text. The Sinatra Server script: require 'sinatra' set :root, 'lib/app' before d ...

What is the best way to horizontally replace buttons in a Navbar?

I'm currently new to coding and I'm attempting to create a navbar using Bootstrap. However, I'm struggling to align the buttons horizontally. I've attempted using class="float-right" on every element without success. I even tried using ...

Unable to retrieve scroll position utilizing 'window.scrollY' or 'window.pageYOffset'

Issue I am facing a problem where I need to determine the scroll position in order to adjust the tooltip position based on it. This is how my tooltip currently appears: However, when I scroll down, I want the tooltip to toggle downwards instead of its c ...

Displaying the second image twice in a jQuery image slider

When attempting to implement a slider on my website, I encountered an issue where the second image appears twice in a row before the slider starts working as expected. I'm struggling to figure out why this is happening. Here is the jQuery code I am u ...

Tips for dynamically expanding the interface or type of an object in TypeScript

Currently, I am exploring the integration of PayPal's Glamorous CSS-in-JS library into a boilerplate project that also utilizes TypeScript. Glamorous provides a way to incorporate props into an element as shown below: const Section = glamorous.secti ...

What is the best way to re-render a component immediately following an update in React?

As I attempt to change the color of a bar to green and then back to black, it seems like the latter color update is taking precedence in my code. const [color, setColor] = useState("black") const bubbleSort = async () => { const sleep = ms => ...

I need to print out a table, but when I preview the print, I want to rotate the entire page for better visibility

Is there a way to rotate the print review using CSS and HTML? I am facing issues as the CSS styles do not seem to apply properly on it. Can someone help me solve this problem? ...

Is it possible to incorporate several modules into nodeJS simultaneously?

I'm a beginner when it comes to NodeJS. I was wondering if it's possible for me to call 2 different JavaScript files using NodeJS and ExpressJS. The idea is to split the work, where I can focus on one file while my partner works on another. So, I ...

Incorporating JSON data into an HTML table

Looking to populate an HTML table with JSON data, but struggling with parsing and appending the data correctly. Can anyone provide guidance or assistance? <!DOCTYPE html> <html> <head> <title>JSON Demo</title> < ...

Is It Possible to Align Text Horizontally within a Box?

Hey everyone! I'm trying to figure out how to display two elements, "1" and "new referral," side by side without the new referral having a green background. Any help would be greatly appreciated. I've shared my HTML and CSS code snippets below. I ...

Guide on bringing in Javascript file into your Ionic/Angular application

Within my Ionic 2 application, I have incorporated three.js along with a PLYLoader extension for three.js (accessible here: https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/PLYLoader.js) Integrating three.js is straightforward by includi ...

angular-chart custom tooltip positioning issue

Hello everyone! I'm having trouble fixing the tooltip position when hovering over a point. I've searched through various posts on StackOverflow and have tried all the examples provided in my implementation: https://github.com/chartjs/Chart.js/tr ...