javascript - 有没有办法使用单个工具栏 DOM 元素来拥有多个内联配置的 ckeditors

Question

内联配置的 ckeditor 的工具栏附加到文档正文。除非用户没有将编辑器聚焦，否则工具栏将被隐藏。如果我们在同一页面上有多个内联编辑器，则正文中将附加相同数量的工具栏 DOM 元素 - 每个元素都有特定的标识符。我的问题是，是否有办法为多个内联 ckeditors 使用单个工具栏 DOM 元素？我知道(并且我在不同的上下文中使用)共享空间插件可以做到这一点，但缺点是应该提供一个元素来附加单个工具栏。没关系，但它是静态的，并且保留在 DOM 顺序中放置的位置，我希望将它重新定位到当前聚焦的编辑器旁边。 似乎我要么必须使用默认的内联行为，要么使用共享空间插件并自己重新定位单个工具栏实例。 关于这个问题有什么想法或者我缺少什么吗？

Answer 1

不，每个 CKEditor 都会创建自己的工具栏。但是您可以为此创建自己的插件，它实际上只是显示事件元素的工具栏。我创建了一个来看看。您也确实需要配置编辑器配置。

CKEDITOR.plugins.add('grouplabel', {
init : function(editor) {

    function getCorrespondingName(no) {
        var tempNo = 0;
        for (var i = 0; i < editor.config.toolbar.length; i++) {
            if (editor.config.toolbar[i].groupName != undefined) {
                if (tempNo == no) {
                    return i;
                }
                tempNo++;
            }

        }
    }

    function toggleGroupDisplay(evt) {
        if (evt.data.isMinimized) {
            resetAllAbsolute();
            $(this).find(".absoluteToolCont").toggleClass("displayNone");
        } else {
            $('.' + evt.data.grpID).each(function() {
                toggleGroupDisplayInd(this)
            });
        }
    }

    function resetAllAbsolute() {
        $(".absoluteToolCont").addClass("displayNone");
    }

    function toggleGroupDisplayInd(obj) {
        var idM = $("#" + obj.id).parent().attr("id");
        $("#" + idM + "> span").toggleClass("displayNone");
        $("#" + idM).toggleClass("toggleMargin");
        $("#groupLabel_" + idM).toggleClass("toggleMargin");
        $("#groupLabelArrowBtn_" + idM).toggleClass("groupLabelArrowDown");
    }

    var openContainerArray = [ "CHARACTER", "TEXT ALIGN" ];

    function createMainGroups() {
        for (var j = 0; j < editor.toolbox.toolbars.length; j++) {

            var grpId = editor.toolbox.toolbars[j].id;
            var conNo = getCorrespondingName(j);

            var isGroup = editor.config.toolbar[conNo].groupNR;
            if (!isGroup) {
                createMainGroup(conNo, grpId);
            }
        }
    }

    function createMainGroup(conNo, grpId) {
        // console.log(conNo, grpId)
        var name = editor.config.toolbar[conNo].groupName[0];
        var className = editor.toolbar[conNo].name;
        var name = editor.config.toolbar[conNo].groupName[0];
        var elementDiv = groupLabelElementDiv(grpId, className);
        var textDiv = "<div class='textGroupLabel'></div>";
        var arrowDiv = "<div  id='groupLabelArrowBtn_" + grpId
                + "' class='groupLabelArrowUp'></div>";

        $("#" + grpId).addClass("editorGroup transitionType");

        if (editor.config.showIconOnly) {
            detachAndMakeAbsolute(grpId);
        }
        $("#" + grpId).prepend(elementDiv);
        $("#groupLabel_" + grpId).append(textDiv);
        if (!editor.config.showIconOnly) {
            $("#groupLabel_" + grpId).append(arrowDiv);
        }
        addNameOrIcon(editor, name, grpId);
        $(" #groupLabel_" + grpId).unbind("click").bind("click", {
            grpID : "groupLabel_" + className,
            isMinimized : editor.config.showIconOnly
        }, toggleGroupDisplay);
        var bool = false;
        if (!editor.config.showIconOnly) {
            for (var k = 0; k < openContainerArray.length; k++) {
                if (name == openContainerArray[k]) {
                    bool = true;
                }
            }
        }
        showGroup(bool, grpId);

    }

    function detachAndMakeAbsolute(grpId) {
        var divId = "absoluteToolCont_" + grpId
        var absoluteDiv = "<div class='displayFlexAbsolute"
                + " absoluteToolCont' id='" + divId + "'></div>";
        $("#" + grpId).prepend(absoluteDiv);
        var detachedDiv = $("#" + grpId + "> span").detach();
        // console.log(detachedDiv)
        detachedDiv.appendTo("#" + divId);
        resetAllAbsolute();
    }

    function showGroup(bool, grpId) {
        if (!bool) {
            $("#" + grpId + "> span").toggleClass("displayNone");
            $("#" + grpId).toggleClass("toggleMargin");
            $("#groupLabel_" + grpId).toggleClass("toggleMargin");
            $("#groupLabelArrowBtn_" + grpId).toggleClass(
                    "groupLabelArrowDown");
        }
    }

    function addNameOrIcon(editor, name, grpId) {
        var groupName = $("#groupLabel_" + grpId + ">.textGroupLabel");
        var divId = "absoluteToolCont_" + grpId
        if (!editor.config.showIconOnly) {
            groupName.text(name);
        } else {
            var clsName = name.replace(/ /g, '');
            var detachedDiv = $("#" + divId).detach();
            $("#groupLabel_" + grpId).prepend(detachedDiv);
            groupName.html("<div class='iconToolbar " + clsName
                    + "'></div>");
            var overFlowRObj = "#cke_" + editor.name + " .cke_inner "
                    + ".cke_top";
            $(overFlowRObj).addClass("cke_top_overflow");
        }
    }

    function groupLabelElementDiv(grpId, className) {
        var elementDiv = "<div id='groupLabel_" + grpId
                + "' class='groupLabel transitionType groupLabel_"
                + className + "'></div>";
        return elementDiv;
    }

    function createSubGroup() {
        var loopVar = 0;
        var divEle = '<div class="subGrpLabel textGroupLabel">' + "Font"
                + '</div>';

        /*
         * for (var k = 0; k < editor.toolbar.length; k++) { if
         * (editor.toolbar[k] != "/") { for (var l = 0; l <
         * editor.toolbar[k].items.length; l++) { if
         * (editor.toolbar[k].items[l].type == "separator") { //
         * console.log("sep") // $(editor.toolbar[k].items[l]).text("name"); } } } }
         */

    }
    editor.on('destroy', function() {
        /* alert(this.name) */
        var undoName = "undoRedoCont" + editor.name;
        $("#" + undoName).remove();

    });
    editor.on('instanceReady', function() {
        // console.log(previewSeen);
        $("#universalPreloader").addClass("displayNone");
        createMainGroups();
        createSubGroup();
        focusEvent();
        undoRedoButtonSeprator();
    });
    function undoRedoButtonSeprator() {
        var undoRedoContEle = "<div class='urcEle' id='undoRedoCont"
                + editor.name + "'></div>";
        $("#undoRedoContSetParent").append(undoRedoContEle);
        var ele = $("#" + editor.ui.instances.Undo._.id).detach();
        $("#undoRedoCont" + editor.name).append(ele);
        $(ele).addClass("cke_button_75px");
        ele = $("#" + editor.ui.instances.Redo._.id).detach();
        $("#undoRedoCont" + editor.name).append(ele);
        $(ele).addClass("cke_button_75px");
        $("#undoRedoCont" + editor.name).addClass("displayNone");

    }

    function focusEvent() {
        var editorObj = /* parent. */$("#cke_wordcount_" + editor.name);
        editorObj.addClass("displayFlexRelative").addClass("displayNone")
                .addClass("vertical-align-middle").addClass(" flexHCenter")
                .css("width", "160px");
        var undoRedoCont = /* parent. */$("#undoRedoCont" + editor.name);
        undoRedoCont.addClass("displayNone");
        editor.on('focus', function(e) {
            onFoucs(e);
        });
        editor.on('blur', function(e) {
            onBlur(e);
        });
    }

    function onBlur(e) {
        var editorObj = /* parent. */$("#cke_wordcount_" + e.editor.name);
        editorObj.addClass("displayNone");
        $("#undoRedoCont" + editor.name).addClass("displayNone");
        $("#dummyUNDOREDO").removeClass("displayNone");
        resetAllAbsolute();
        /*
         * if (e.editor.config.customInline) {
         * $("#toolbarEditorInline").addClass("displayNone"); }
         */
    }

    function onFoucs(e) {
        var editorObj = /* parent. */$("#cke_wordcount_" + e.editor.name)
        editorObj.removeClass("displayNone");
        $("#undoRedoCont" + editor.name).removeClass("displayNone");
        $("#dummyUNDOREDO").addClass("displayNone");
        /*
         * if (e.editor.config.customInline) {
         * $("#toolbarEditorInline").removeClass("displayNone"); }
         */
    }

    CKEDITOR.document.appendStyleSheet(CKEDITOR.plugins
            .getPath('grouplabel')
            + 'css/style.css');

}
});