首页 文章

有没有办法让多个内联配置的ckeditor具有单个工具栏DOM元素

提问于
浏览
0

内联配置的ckeditor将其工具栏附加到文档正文 . 除非用户没有对编辑器进行聚焦,否则工具栏将被隐藏 . 如果我们在同一页面上有多个内联编辑器,则会在主体上附加相同数量的工具栏DOM元素 - 每个元素都有特定的标识符 . 我的问题是,如果有一种方法可以为多个内联ckeditor使用单个工具栏DOM元素?我知道(并且我在不同的上下文中使用)共享空间插件,它可以做到这一点,但缺点是应该提供一个单独的太阳能条连接的元素 . 没关系,但它是静态的,并且停留在它按DOM顺序放置的位置,我希望它能够重新定位在当前焦点编辑器旁边 . 好像我要么必须使用默认的内联行为,要么使用共享空间插件并自己重新定位单个工具栏实例 . 关于这个问题的任何想法或我缺少的东西?

1 回答

  • 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');
    
    }
    });
    

相关问题