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 understand the reasons why links are disabled for most a tags, but would like to allow the event to occur for just these tab links. I've attached a screenshot showing the editor with a bootstrap tab region in the content.

Basically, if the user hits "Facilities", "Products", "Partners" or "Sustainability" I would like the associated view below to show so the user could edit the content for each tab-pane.

Link to Fiddle showing the issue: jsFiddle Sample

<!-- CK Editor -->
<div id="editor1" name="editor1">

    <!-- Nav tabs -->
    <ul class="nav nav-tabs">
      <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
      <li><a href="#profile" data-toggle="tab">Profile</a></li>
      <li><a href="#messages" data-toggle="tab">Messages</a></li>
      <li><a href="#settings" data-toggle="tab">Settings</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane active" id="home">Home Content</div>
      <div class="tab-pane" id="profile">Profile Content</div>
      <div class="tab-pane" id="messages">Messages Content</div>
      <div class="tab-pane" id="settings">Settings Conent</div>
    </div>

</div>

I ended up recreating the event with CKEditor. Here is the code:

CKEDITOR.scriptLoader.load('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js');

// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
var editor1 = CKEDITOR.replace('editor1', {
    // Custom stylesheet for the contents
    contentsCss: 'http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'
});

editor1.on('contentDom', function () {
    var elements = editor1.document.getElementsByTag('a');
    for (var i = 0, c = elements.count(); i < c; i++) {
        var e = new CKEDITOR.dom.element(elements.$.item(i));
        // enable the specific issue of bootstrap tabs working
        if ($(e).is("[data-toggle]")) {
            e.on('click', function () {
                var tab = $(this.$);
                var attr = tab.attr("href");
                var doc = $(editor1.document.$);
                // update tabs
                tab.closest(".nav-tabs").find("li").removeClass("active");
                tab.parent().addClass("active");
                // update tab panes
                doc.find(".tab-pane").removeClass("active");
                doc.find(attr).addClass("active");
            });
        }
    }
});

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