javascript - 在 ckeditor 中切换实时预览

Question

我正在为 ckeditor 使用 jquery 适配器，我可以在编辑器预览中添加自定义 css 文件，使用CKEDITOR.config.contentsCss 下面是嵌入的 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()链接以及重新加载代码段来控制将删除哪个文件。

祝你好运！