My content administrators want to be able to toggle back and forth between bootstrap nav-pills inside of the CKEditor instance. Out of the box, CKEditor doesn't seem to allow javascript to function in the editor. An example is below - I need to be able to click on the different pills to edit the associated content:

enter image description here

I have found an associated question that seem to answer this issue but I cannot get it to work in Drupal - I don't know how to implement the code. I would add a comment to that question but I do not have sufficient reputation points.

1 Answer 1


Using the code supplied in this associated question, I was able to get the javascript nav-pills to work in the CKEditor instance for Drupal 7. Unfortunately, it will only function in Firefox for PC. In addition, I had to add the following code to the ckeditor.config.js file as well as manually add the script to the admin theme's html.tpl.php file - this seems redundant but it will only work if both files have it.

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;

jqScript.onload = function() { editorHead.appendChild(bsScript); }; 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.