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

Question

这是我正在努力的挑战。我有一个用户希望能够使用单个ckeditor实例中的引导选项卡来标记不同的选项卡。我理解为什么大多数标签禁用链接的原因，但是希望仅为这些标签链接发生事件。我附上了一个截图，显示了内容中带有引导标签区域的编辑器。

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

链接到小提琴，显示问题：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>

我最终用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");
            });
        }
    }
});

Answer 1

要在完整编辑器中执行此操作，您需要能够将script插入到CKEditor生成的iframe中以显示内容。

问题：

这证明是有挑战性的，因为CKEditor会注释掉并编码任何脚本标签，以防止它们干扰编辑器。

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

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

解决方案：

为了插入脚本标记，您需要在文本已被解析后访问编辑器实例，然后在该点添加脚本标记。点击instanceready事件并从事件实例中获取编辑器以访问文档头并附加脚本标记（改编自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