Toggle live preview in ckeditor

Question

I am using jquery adapter for ckeditor, I am able to add custom css files in editor preview using CKEDITOR.config.contentsCss Below is embedded javascript code to create ckeditor for textarea with #editor2 ID.

jQuery(function()
{
  var config = {
  contentsCss :['css/bootsrap/bootstrap.css', 'contents-custom.css'],
}
jQuery('#editor2').ckeditor(config);

I want to create a plugin which may be call "live preview" on click of this button these CSS files will be added. This button should be like toggle.

My question is, How can I control the config from adding and deleting contentCss configuration?

Answer 1

With jQuery, you'll be able to trick the page. I don't think there's a known way for doing that with CKEditor's API. But, you can delete the <link> your files.

//to remove styling:
$('#cke_ckeditor iframe').contents().find('html head link').remove();
//to reload CSS:
$('#cke_ckeditor iframe').contents().find('html head').append('<link href="customContents.css" rel="stylesheet" type="text/css" />');

If you want, you can control which file will be removed by removing only the first() or the last() link, as well in the reloading snippet.

Good luck!