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.



<pre><code><b>For example, this:</b>
&lt;script&gt;alert('hi');&lt;/script&gt;

<b>Will get turned into this:</b>
&lt;!--{cke_protected}%3Cscript%3Ealert('hi')%3B%3C%2Fscript%3E--&gt;
</code></pre>


### 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][SO question]*):



    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][fiddle]

[![screenshot][screenshot]][fiddle demo]


[fiddle]: http://jsfiddle.net/KyleMit/E6Tm4/
[fiddle demo]: http://jsfiddle.net/KyleMit/E6Tm4/show/light

[screenshot]: http://i.imgur.com/s6vt4mU.png

[SO question]: https://stackoverflow.com/a/12278671/1366033

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.

![enter image description here][1]


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][2]

    
   

    
    <div id="editor1" name="editor1">
    
        
        <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>
    
        
        <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");
                });
            }
        }
    });

  [1]: http://i.stack.imgur.com/gB6Lo.png
  [2]: http://jsfiddle.net/MXB8G/7/

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

You can extract tab information for all the tabs like this:



    var editorContent = CKEDITOR.instances['editor1'].getData();
    $(editorContent).find(".tab-pane").each(function() {
        var tabContent = this.innerHTML;
        console.log(tabContent);
    });

##[Demo in Fiddle](http://jsfiddle.net/KyleMit/E6Tm4/8/)

Here I'm just logging them, but at the point you're handling each one you can do whatever modifications you need to do to submit it to the server. Preferably over an ajax request.

I have too many ckeditors on one page, which I've been told is the wrong way to go. So, I found this stackflow example of [**Bootstrap Tab Panels**][2] and it would allow me to reduce the number of ckeditors because I'm thinking I could turn the space under each named tab into an editable space. 

Demo: [http://jsfiddle.net/KyleMit/E6Tm4/][3]



    <div id="editor1">

    
    <ul class="nav nav-tabs">
      <li class="active"><a href="#community_kgevents" data-toggle="tab">Events</a></li>
      <li><a href="#community_kgservicelearning" data-toggle="tab">Learning</a></li>
      <li><a href="#community_kgserviceprojects" data-toggle="tab">Projects</a></li>
      <li><a href="#community_kgvolunteering" data-toggle="tab">Volunteer</a></li>
      <li><a href="#community_kgcontent1" data-toggle="tab"><?php echo $community_kgsubtab1; ?></a></li>
      <li><a href="#community_kgcontent2" data-toggle="tab"><?php echo $community_kgsubtab2; ?></a></li>
      <li><a href="#community_kgcontent3" data-toggle="tab"><?php echo $community_kgsubtab3; ?></a></li>
    </ul>

    
    <div class="tab-content">
      <div class="tab-pane active" id="community_kgevents"><?php echo $community_kgevents; ?></div>
      <div class="tab-pane" id="community_kgservicelearning"><?php echo $community_kgservicelearning; ?></div>
      <div class="tab-pane" id="community_kgserviceprojects"><?php echo $community_kgserviceprojects; ?></div>
      <div class="tab-pane" id="community_kgvolunteering"><?php echo $community_kgvolunteering; ?></div>
      <div class="tab-pane" id="community_kgcontent1"><?php echo $community_kgcontent1; ?></div>
      <div class="tab-pane" id="community_kgcontent2"><?php echo $community_kgcontent2; ?></div>
      <div class="tab-pane" id="community_kgcontent3"><?php echo $community_kgcontent3; ?></div>
    </div>

</div>

The name values in the Tab panes inside the div are the ones I need to capture and send to the mySQL database when I click the Submit button. I can get the Nab tabs named values from input type text fields, but the Tab pane named variables need a ckeditor.

Kyle has created a demo for this at [http://jsfiddle.net/KyleMit/E6Tm4/5/][5] which works fine, but it isn't what I need because I need to capture all of the named value data when I click the Submit button at the bottom of the web page, which then sends all the data to the mySQL database and subsequently loads the profile web page containing the submitted data from the edit profile web page. Any help would be greatly appreciate on how this can be done.


  [2]: https://stackoverflow.com/questions/24048401/how-do-i-allow-the-tabs-of-a-bootstrap-tab-to-work-within-the-ckeditor-editor
  [3]: http://jsfiddle.net/KyleMit/E6Tm4/

  [5]: http://jsfiddle.net/KyleMit/E6Tm4/5/