Question

如何使用javascript在CK编辑器中创建动态菜单？

有关详细信息，请参阅当前工作代码的屏幕截图。

我想要动态上下文菜单

如果数组有2个单词意味着需要在上下文菜单中创建和显示单词需要减少上下文菜单长度，

如果数组有4个单词，则需要为四个单词创建上下文菜单

此结果声明为数组。

            var ckedit ;
             editor.on('instanceReady', function (e) {
             var e = e.editor;
             ckedit = e;   
            e.addMenuGroup("cv_people", 100);
             e.addMenuItems({ 
          // Addmenu context menu
                     cv: {
                        label: "Suggestions",
                        group: "cv",
                        getItems: function () {
                        ckedit.addCommand("cv1", {
                        exec: function (ckedit) {
                        ckedit.insertText(result[0]);
                        }
                    });
                        ckedit.addCommand("cv2", {
                        exec: function (ckedit) {
                        ckedit.insertText(result[1]);
                        }
                    });
                    ckedit.addCommand("cv3", {
                        exec: function (ckedit) {
                        ckedit.insertText(result[2]);
                        }
                    });
                    ckedit.addCommand("cv4", {
                        exec: function (ckedit) {
                        ckedit.insertText(result[3]);
                        }
                    });

                   return {
                            cv1: CKEDITOR.TRISTATE_ON,
                            cv2: CKEDITOR.TRISTATE_OFF,
                            cv3: CKEDITOR.TRISTATE_OFF,
                            cv4: CKEDITOR.TRISTATE_OFF,
                            };
                        }
                   }
              });
           }
              cv1: {
                        label: " ",
                        group: "cv_people",
                        getItems: function () {
                            //alert("ok");
                        }
                    },
                    cv2: {
                        label: " ",
                        group: "cv_people",
                        getItems: function () {
                            //alert("ok");
                        }
                    },
                    cv3: {
                        label: " ",
                        group: "cv_people",
                        getItems: function () {
                            //alert("ok");
                        }
                    },
                    cv4: {
                        label: " ",
                        group: "cv_people",
                        getItems: function () {
                            //alert("ok");
                        }
                    },

请帮助我动态获取情境。

请参阅当前工作代码的屏幕截图。

Answer 1

由于你没有提供Minimal, Complete, and Verifiable example，我应该做很多猜测。你当前的代码也很奇怪。例如，为什么您需要这么多的变量副本，所有变量都链接到同一个CKEditor实例（editor，ckedit和＆＃34;重新定义＆＃34; e里面监听器）？我只会使用ckedit，我认为你会使用类似的东西：

var ckedit = CKEDITOR.replace('ckeditor', some config);

我还假设您有一些全局变量results，有时会使用AJAX结果进行更新。我会改用固定的。

var results = ["A", "BB", "CCC", "DDDD"];

所以你需要的是这样的东西

ckedit.on('instanceReady', function (ee) {
    ckedit.addMenuGroup("cv_people", 100);
    ckedit.addMenuGroup("cv_sub", 100);
    ckedit.addMenuItems({
        cv: {
            label: "Suggestions",
            group: "cv_people",
            getItems: function () {
                var menuItems = {};
                var states = {};
                for (var i = 0; i < results.length; i++) {
                    // create scope for "local" i that we use in onClick closure
                    (function (i) {
                        var key = "cv_" + i;
                        menuItems[key] = {
                            label: results[i],
                            group: "cv_sub",
                            onClick: function () {
                                ckedit.insertText(results[i]);
                                //alert(results[i]);
                            }
                        };
                        states[key] = CKEDITOR.TRISTATE_OFF;
                    })(i);
                }

                ckedit.addMenuItems(menuItems);

                return states;
            }
        }
    });

    ckedit.contextMenu.addListener(function (element, selection) {
        return {
            cv: CKEDITOR.TRISTATE_OFF
        };
    });
});

这里的想法是你创建菜单组和顶级＆＃34;建议＆＃34;菜单项预先;通过使用自动生成的键的值填充相应的容器对象，在调用顶级menuItems时创建（或重新创建）子states及其getItems按需{ {1}}。

如何使用javascript在CK编辑器中创建动态菜单？

1 个答案: