CODEWITHSUNDEEP
twitter-bootstrapckeditorckeditor4.x
Igor Carmagna
Igor Carmagna

Reputation: 957

CKEditor - Use Bootstrap js/css + Custom css inside ckeditor preview

I would like to use bootstrap js/css AND a custom css file in ckeditor preview.
So, for example, if I write this code in ckeditor source code 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>

... I should see in ckeditor preview two 50% width columns (one red and one green).

I've found out that you can add css files to ckeditor with contentsCss or addContentsCss config (see ckeditor documentation for explanation), but what about bootstrap js files? How can I add js files to ckeditor preview?

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: 

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

Context:
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.
Basically...It's the default/standard ckeditor implementation (version 4.4.7).

!!!!EDIT!!!! My solution: 

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

If you come up with a better solution, let me know.
In the meantime, if you find this question useful please vote up to improve its visibility.

Upvotes: 4

Views: 6427

Answers (2)

Davis
Davis

Reputation: 21

I think CKEditor Bootstrap Utils will help you. It allows you to include (attach) Bootstrap's styles to your CKEditor document (preview) area automatically due to this bundle has Bootstrap Include CSS/JS add-in inside it.

enter image description here

Upvotes: 1

oleq
oleq

Reputation: 15895

There's a contentPreview event which allows manipulation of preview HTML, like

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

Upvotes: 1

Related Questions