Twitter bootstrap 如何允许引导选项卡的选项卡在ckeditor编辑器中工作？

这就是我所面临的挑战。我有一个用户希望能够使用单个ckeditor实例中的引导选项卡通过不同的选项卡进行标记。我理解为什么大多数a标签的链接都被禁用，但我希望只允许这些标签链接发生事件。我附上了一个屏幕截图，显示编辑器在内容中有一个引导选项卡区域

基本上，如果用户点击“设施”、“产品”、“合作伙伴”或“可持续性”，我希望下面显示相关视图，以便用户可以编辑每个选项卡窗格的内容

显示问题的小提琴链接：

家庭内容
配置文件内容
消息内容
环境因素

我最终用CKEditor重新创建了这个事件。代码如下：

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");
            });
        }
    }
});

CKEDITOR.scriptLoader.load（'http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js');
//用一个编辑器替换
//实例，使用默认配置。
var editor1=CKEDITOR.replace（'editor1'{
//内容的自定义样式表
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

要在完整编辑器中执行此操作，您需要能够将

脚本

插入CKEditor生成的

iframe

以显示内容

问题: 这很有挑战性，因为CKEditor将注释掉并编码任何脚本标记，以防止它们干扰编辑器

例如：
警报（“hi”）；
将变成这样：

解决方案： 为了插入脚本标记，您需要在解析文本后访问编辑器实例，然后在该点添加脚本标记。点击

instancerady

事件，从事件实例抓取编辑器以访问文档头和附加脚本标记（改编自）：

CKEDITOR.on（'instancerady'，函数（ev）{
var jqScript=document.createElement（'script'）；
var bsScript=document.createElement（'script'）；
jqScript.src='1〕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）；
});

---

有没有可能用fiddle上传工作演示？你试过什么了吗？此外，您可能希望从图片中裁剪出顶部的“文本编辑器设置”选项卡，以避免歧义。谢谢Kyle的帖子。我将把一把小提琴放在一起，省去额外的标签。这是使用内联版本的CKEditor，我们希望使用常规版本，在那里我们将内容加载到下面的编辑器中。谢谢你的提琴。谢谢你的更新。这比我提出的解决方案要有效得多。感谢您的帮助。我看到了一个未捕获的错误：Bootstrap的JavaScript需要jQuery使用此解决方案时出错。我添加了：

jqScript.onload=function（）{editorHead.appendChild（bsScript）；}并按预期工作！谢谢你的回答！
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");
            });
        }
    }
});