如何允许引导选项卡的选项卡在ckeditor编辑器中工作？ [英] How do I allow the tabs of a bootstrap tab to work within the ckeditor editor?

问题描述

这里是我正在努力的挑战。我有一个用户希望能够通过不同的选项卡与单个ckeditor实例中的引导选项卡。我了解为什么大多数代码都禁用链接，但是希望允许仅针对这些标签链接发生事件。我附上了一个屏幕截图，显示内容中包含引导标签区域的编辑器。

基本上，如果用户点击设施，产品，合作伙伴

链接到Fiddle显示问题：

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

解决方案

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

这篇关于如何允许引导选项卡的选项卡在ckeditor编辑器中工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！