Implement Style Sheets, JavaScript And Plugins To CKEditor

Alagappapandian M
Mar 22, 2017
2.9k
0
0
Blog

Introduction to CKEditor-Part 2

Before reading this post, please read CKEditor-introduction.

Here, we will learn how to add CSS style sheet, JavaScript and plugin to CKEditor. CKEditor runs inside Iframe. Thus, the site (parent page) styles doesn’t work inside CKEditor.

Insert CSS

The CSS files to be used needs to apply style to editor content. It should reflect CSS used in the target pages, where the content is to be displayed.

For single CSS file

<textarea name="myckeditor "></textarea>
<script type="text/javascript">
CKEDITOR.replace('myckeditor');
CKEDITOR.config.contentsCss = '/Content/bootstrap-3.3.7-dist/css/bootstrap-theme.css';
</script>

For multi CSS file

The contentsCss accepts a string or an array of strings. Thus, we can add more than 1 CSS files.

CKEDITOR.config.contentsCss = ['/Content/bootstrap-3.3.7-dist/css/bootstrap-theme.css', '/Content/app.css'];

How to do it?

After adding Bootstrap, we are able to get all CSS styles of Bootstrap.

Here, a simple login form is required with Bootstrap classes. Click Source button in CKEditor toolbar. Paste this code and change the source mode to normal. We can see the full login form with Bootstrap style.

<form class="form-horizontal">
<div class="form-group"> <label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10"> <input type="email" class="form-control" id="email" placeholder="Email"> </div>
</div>
<div class="form-group"> <label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10"> <input type="password" class="form-control" id="password" placeholder="Password"> </div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div>
</div>
</form>

Bootstrp form with CSS style is obtained by adding contentscss in CKEditor.

Insert JavaScript Files to CKEditor

Like CSS, we are able to load JavaScript files into CKEditor.

scriptLoader.load(scriptUrl, [callback], [scope], [showBusy])
$(document).ready(function() {
CKEDITOR.replace('myckeditor');
CKEDITOR.scriptLoader.load('/Assets/bootstrap-4.0.0/js/bootstrap.js');
CKEDITOR.scriptLoader.load('/Scripts/knockout-2.1.0.js');
});

For Multi Script files,

CKEDITOR.scriptLoader.load(['/myscript1.js', '/myscript2.js']);

Add Plugins to CKEditor

CKEditor have thousands of plugins to extend the feature of editor. We can customize every single aspect of CKEditor (i.e. toolbar, skin, color palette, dialogs, context menu, data parsing, styling etc.) and adjust it to our needs. Here, we will learn how to add a plugin simply.

Add YouTube plugin

This plugin allows to insert YouTube videos, using embed code or just the video URL. You can download this plugin at http://ckeditor.com/addon/youtube

Extract the downloaded file into the CKEditor’s plugins folder. Enable this plugin by adding the extraPlugins.

Basic setup

1. Extract the downloaded file into the CKEditor's plugins folder.