在 ckeditor 中切换实时预览

Question

我正在为 ckeditor 使用 jquery 适配器，我可以使用 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() 链接以及重新加载 sn-p 来控制要删除的文件。

祝你好运！