Installation

1. Download the zip file.
2. Extract the contents to your CKEditor plugins directory: /path/to/ckeditor/plugins/bootstrapTabs.
3. Include Bootstrap CSS, Bootstrap JS, and the jQuery JS dependency for your CKEditor.

                 
   // Enable local "bootstrapTabs" plugin from /ckeditorPlugins/bootstrapTabs/ folder.
   CKEDITOR.plugins.addExternal( 'bootstrapTabs', '/ckeditorPlugins/bootstrapTabs/', 'plugin.js' );
   
   // Replace the <textarea id="ckeditor-bootstrap-tabs-demo"> with a CKEditor
   // instance, using default configuration.
   // extraPlugins needs to be set too.
   CKEDITOR.replace( 'ckeditor-bootstrap-tabs-demo', {
     extraPlugins: 'bootstrapTabs',
     contentsCss: [ 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' ],
     on: {
       instanceReady: loadBootstrap,
       mode: loadBootstrap
     }
   });
   
   // Add the necessary jQuery and Bootstrap JS source so that tabs are clickable.
   // If you're already using Bootstrap JS with your editor instances, then this is not necessary.
   function loadBootstrap(event) {
       if (event.name == 'mode' && event.editor.mode == 'source')
           return; // Skip loading jQuery and Bootstrap when switching to source mode.
   
       var jQueryScriptTag = document.createElement('script');
       var bootstrapScriptTag = document.createElement('script');
   
       jQueryScriptTag.src = 'https://code.jquery.com/jquery-1.11.3.min.js';
       bootstrapScriptTag.src = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js';
   
       var editorHead = event.editor.document.$.head;
   
       editorHead.appendChild(jQueryScriptTag);
       jQueryScriptTag.onload = function() {
         editorHead.appendChild(bootstrapScriptTag);
       };
   }
                 
               

Demo