All geek questions in one place

How to change loaded stylesheet after ckeditor initialization

Is it possible to dynamically change the loaded stylesheet for a ckeditor instance?

i.e. I have a ckeditor instance with the following configuration: CKEDITOR.replace ('_ content', {"resize_enabled": true, "customConfig": "/kmt/js/ckeditor_config.js", "contentsCss": "/ custom / ckeditorstyle. css "," contentWidth ":" 240 "});

Not very difficult. Subsequently, I want to allow the user to dynamically change the contentcss attribute ...

+4
source share
2 answers

You can combine the code shown in the answer to this SO question (how to dynamically add stylesheets at runtime) with the accepted answer to this SO question (How to access the body element of a CKEditor instance in JavaScript).

+4
source

Thanx to Pekka, I reached a solution through:

 $('#stylesheeetSelector').change(function() { $.post('/getStylesheet', {id: $(this).val()}, function(data) { for(i in CKEDITOR.instances) { var linkElement = $(CKEDITOR.instances[i].document.$).find('link'); if (data.editorStylesheet > 0) { if (linkElement.length == 0) { $(CKEDITOR.instances[i].document.$).find('head').append('<link rel="stylesheet" type="text/css" href="'+ data.editorStylesheet +'">'); } else { linkElement.attr('href', data.editorStylesheet) } } else if (linkElement.length > 0) { linkElement.remove(); } } }); });

It works by selecting a JSON object filled with the URL of the stylesheet (among others), and sets (or deletes, if not present) the selected stylesheet ...

Clean and simple!

+3
source

Source: https://habr.com/ru/post/1301565/

More articles:


All Articles