How do I allow the tabs of a bootstrap tab to work within the ckeditor editor?

Question

Here is the challenge I\'m struggling with. I have a user that wants to be able to tab through the different tabs with bootstrap tabs that are in a single ckeditor instance. I

Answer 1

To do this in the full editor, you need to be able to insert a script into the iframe that CKEditor generates to display the content.

Problem:

This proves challenging because CKEditor will comment out and encode any script tags to prevent them from interfering with the editor.

For example, this:
<script>alert('hi');</script>

Will get turned into this:
<!--{cke_protected}%3Cscript%3Ealert('hi')%3B%3C%2Fscript%3E-->

Solution:

In order to insert script tags, you need to access the editor instance after the text has already been parsed and then add script tags at that point. Tap into the instanceready event and grab the editor from the event instance to access the document head and append script tags, (adapted from here):

CKEDITOR.on('instanceReady', function(ev) {
    var jqScript = document.createElement('script');
    var bsScript = document.createElement('script');
    
    jqScript.src = 'http://code.jquery.com/jquery-2.0.2.js';
    bsScript.src = 'http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js';

    var editorHead = ev.editor.document.$.head;
    editorHead.appendChild(jqScript);
    editorHead.appendChild(bsScript);
});

Working Demo in Fiddle