在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()鏈接以及重新加載代碼段來控制將刪除哪個文件。

祝好運！