Post
Ask Question

Implement Style Sheets, JavaScript And Plugins To CKEditor

Introduction to CKEditor-Part 2
 
Before reading this post, please read CKEditor-introduction.
 
Here, we will learn how to add a CSS style sheets, JavaScript, and plugin to CKEditor. CKEditor runs inside Iframe. Thus, the site (parent page) styles don’t work inside CKEditor.
 
Insert CSS
 
The CSS files to be used need to apply a style to editor content. It should reflect CSS used in the target pages, where the content is to be displayed.
 
For single CSS file 
  1. <textarea name="myckeditor "></textarea>  
  2. <script type="text/javascript">  
  3.     CKEDITOR.replace('myckeditor');  
  4.     CKEDITOR.config.contentsCss = '/Content/bootstrap-3.3.7-dist/css/bootstrap-theme.css';  
  5. </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. 
  1. <form class="form-horizontal">  
  2.     <div class="form-group"> <label for="email" class="col-sm-2 control-label">Email</label>  
  3.         <div class="col-sm-10"> <input type="email" class="form-control" id="email" placeholder="Email"> </div>  
  4.     </div>  
  5.     <div class="form-group"> <label for="password" class="col-sm-2 control-label">Password</label>  
  6.         <div class="col-sm-10"> <input type="password" class="form-control" id="password" placeholder="Password"> </div>  
  7.     </div>  
  8.     <div class="form-group">  
  9.         <div class="col-sm-offset-2 col-sm-10">  
  10.             <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div>  
  11.         </div>  
  12.     </div>  
  13.     <div class="form-group">  
  14.         <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div>  
  15.     </div>  
  16. </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. 
  1. scriptLoader.load(scriptUrl, [callback], [scope], [showBusy])  
  2. $(document).ready(function() {  
  3.     CKEDITOR.replace('myckeditor');  
  4.     CKEDITOR.scriptLoader.load('/Assets/bootstrap-4.0.0/js/bootstrap.js');  
  5.     CKEDITOR.scriptLoader.load('/Scripts/knockout-2.1.0.js');  
  6. });   
For Multi Script files,
 
CKEDITOR.scriptLoader.load(['/myscript1.js', '/myscript2.js']);
 
Add Plugins to CKEditor
 
CKEditor has thousands of plugins to extend the feature of the 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 us 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.
 
 
 
2. Enable this plugin by adding the extraPlugins. 
  1. $(document).ready(function() {  
  2.     CKEDITOR.replace('myckeditor');  
  3.     CKEDITOR.config.extraPlugins = 'youtube';  
  4. });   
Now, you can get YouTube icon in CKEditor toolbar. Just click an icon, a dialog pops up. Just paste embed code or video URL.
 
 
In an upcoming post, we will learn how do create a plugin and dialog in CKEditor.
 
To know more about CKEditor, refer