在ckeditor中切换实时预览

Question

我正在使用jquery适配器用于ckeditor，我可以使用CKEDITOR.config.contentsCss在编辑器预览中添加自定义css文件。下面是嵌入式javascript代码，用＃editor2 ID为textarea创建ckeditor。

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

我想创建一个插件，可以在点击此按钮时调用“实时预览”，这些CSS文件将被添加。 这个按钮应该像切换一样。

我的问题是，如何通过添加和删除contentCss配置来控制配置？

Answer 1

使用jQuery，您将能够欺骗页面。 我不认为使用CKEditor的API可以做到这一点。 但是，您可以删除<link>您的文件。

//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" />');

如果需要，您可以通过仅删除第first()或last()链接以及重新加载代码段来控制将删除哪个文件。

祝好运！