CKEditor - Use Bootstrap js / css + Custom css inside ckeditor preview
I would like to use bootstrap js / css AND custom css file in ckeditor preview.
So, for example, if I write this code in the ckeditor source 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 two 50% width columns in ckeditor (one red and one green).
I found out that you can add css files to ckeditor with config contentsCss
or addContentsCss
(see ckeditor documentation for explanation), but what about bootstrap js files? How to add js files to ckeditor preview?
I already know that (to allow class / styles tags) I need to customize the 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 are boot based but different) and I am using "classic CKEditor editing" or "frame editing" which means the editor creates a temporary item for itself.
Basically ... This is the default implementation of the standard ckeditor (version 4.4.7).
!!!! EDIT !!!! My decision:
/*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 can think of a better solution, let me know.
In the meantime, if you find this question helpful, please vote to improve its visibility.
source to share
There is an contentPreview
event here that lets you manipulate the HTML view like
CKEDITOR.replace( 'editor', {
on: {
contentPreview: function( evt ) {
evt.data.dataValue = '<b style="color: red; font-size: 10em">B</b>';
}
}
} );
source to share
I think CKEditor Bootstrap Utils will help you. This allows you to automatically include (attach) Bootstrap styles to the CKEditor document area (preview) due to the fact that in this package Bootstrap includes a CSS / JS add-on inside it.
source to share