CKEditor - Использовать Bootstrap js/css + Пользовательский css внутри ckeditor Предварительный просмотр

Question

Я хотел бы использовать bootstrap js/css И пользовательский файл css в предварительном просмотре ckeditor.
Так, например, если я пишу этот код в представлении источника 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% (один красный и один зеленый).

Я узнал, что вы можете добавить css-файлы в ckeditor с contentsCss или addContentsCss config (см. Документацию по ckeditor для объяснения), но как насчет загрузочных файлов js? Как добавить js-файлы в предварительный просмотр ckeditor?

Я уже знаю, что (чтобы использовать теги class/styles) Мне нужно настроить ACF. На данный момент я просто использовал быстро исправить, чтобы полностью отключить ACF:

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

Контекст:
Мои администратора и во внешнем интерфейсе темы различны (как самозагрузки основе, но разные) и я использую «CKEditor классическое редактирование "или" рамное редактирование ", что означает, что редактор создает для себя временный элемент.
В основном ... Это стандартная реализация стандартного ckeditor (версия 4.4.7).

!!!! EDIT !!!! Мое решение:

/*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>'; 
     } 
    } 
}); 

Answer 2

Я думаю CKEditor Bootstrap Utils поможет. Это позволяет автоматически включать (прикреплять) стили Bootstrap в область документа CKEditor (предварительный просмотр) из-за того, что в этом пакете Bootstrap включает надстройку CSS/JS внутри него.