twitter-bootstrap - CKEditor - 在 ckeditor 预览中使用 Bootstrap js/css + 自定义 css

Question

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

<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 将 css 文件添加到 ckeditor或 addContentsCss config(请参阅 ckeditor 文档以获取解释)，但是 Bootstrap js 文件呢？如何将 js 文件添加到 ckeditor 预览？

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

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

上下文:
我的管理和前端主题不同(都基于 Bootstrap ，但不同)，我使用“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});  

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

Answer 1

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

CKEDITOR.replace( 'editor', {
    on: {
        contentPreview: function( evt ) {
            evt.data.dataValue = '<b style="color: red; font-size: 10em">B</b>';
        }
    }
} );