4

我想在 ckeditor 预览中使用引导 js/css和自定义 css 文件。
因此，例如，如果我在 ckeditor 源代码视图中编写此代码...

<div class="row">
  <div class="col-xs-6" style="background-color: red;">
    <p>First column</p>
  </div>
  <div class="col-xs-6" style="background-color: green;">
    <p>Second column</p>
  </div>
</div>

...我应该在 ckeditor 预览中看到两个 50% 宽度的列（一个红色和一个绿色）。

我发现您可以使用contentsCss或addContentsCss配置将 css 文件添加到 ckeditor（请参阅 ckeditor 文档以获取解释），但是引导 js 文件呢？如何将 js 文件添加到 ckeditor 预览？

我已经知道（为了允许类/样式标签）我需要配置 ACF。现在我只是使用了一个快速修复来完全禁用 ACF： 

CKEDITOR.replace( 'editor1', {allowedContent: true} );

上下文：
我的管理和前端主题不同（都是基于引导程序，但不同），我使用“CKEditor 经典编辑”或“框架编辑”，这意味着编辑器为自己创建一个临时元素。
基本上......这是默认/标准 ckeditor 实现（版本 4.4.7）。

！！！！编辑！！！！我的解决方案： 

/*Javascript files appear to be NOT necessary (if your page is bootstrap-based)  
CKEDITOR.scriptLoader.load(['https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js','https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'] );  
*/
CKEDITOR.config.contentsCss  = ['https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css','mycustom.css'];
CKEDITOR.replace('editor1', {allowedContent: true});

如果您提出更好的解决方案，请告诉我。
同时，如果您觉得这个问题有用，请投票以提高其知名度。

4

2 回答 2

2

有一个contentPreview允许操作预览 HTML 的事件，例如

CKEDITOR.replace( 'editor', {
    on: {
        contentPreview: function( evt ) {
            evt.data.dataValue = '<b style="color: red; font-size: 10em">B</b>';
        }
    }
} );
于 2015-06-24T12:43:21.190 回答
1

我认为 CKEditor Bootstrap Utils会帮助你。它允许您自动将 Bootstrap 的样式包含（附加）到您的 CKEditor 文档（预览）区域，因为此捆绑包中包含 Bootstrap Include CSS/JS 插件。

在此处输入图像描述

于 2015-06-29T15:42:08.483 回答