title: CKEditor - Use Bootstrap js/css + Custom css inside ckeditor preview
body: <p>I would like to use bootstrap js/css <strong>AND</strong> a custom css file in ckeditor preview.<br>
  So, for example, if I write this code in ckeditor source code view...</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-xs-6" style="background-color: red;"&gt;
      &lt;p&gt;First column&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-6" style="background-color: green;"&gt;
      &lt;p&gt;Second column&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>... I should see in ckeditor preview two 50% width columns (one red and one green).  </p>
  
  <p>I've found out that you can add css files to ckeditor with <code>contentsCss</code> or <code>addContentsCss</code> config (see ckeditor documentation for explanation), but what about bootstrap js files? How can I add js files to ckeditor preview?</p>
  
  <p>I already know that (in order to allow class/styles tags) I need to configure ACF. For now I just used a quick fix to disable ACF completely:  </p>
  
  <pre><code>CKEDITOR.replace( 'editor1', {allowedContent: true} );
  </code></pre>
  
  <p><strong><em>Context:</em></strong><br>
  <em>My admin and frontend themes are different (both bootstrap-based, but different) and I use "CKEditor classic editing" or "framed editing", which means the editor creates a temporary  element for itself.<br>
  <strong>Basically...It's the default/standard ckeditor implementation (version 4.4.7).</em></strong> </p>
  
  <p><strong>!!!!EDIT!!!!
  My solution:</strong>  </p>
  
  <pre><code>/*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});  
  </code></pre>
  
  <p>If you come up with a better solution, let me know.<br>
   In the meantime, if you find this question useful please vote up to improve its visibility.</p>