jquery – CKEditor中的自动完成列表

我需要向CKEditor添加一个功能,以便在用户在文档中键入“#”时向用户提供建议,这些建议可以根据页面上的其他字段动态更改.请帮忙

解决方法

为了制作一个意见箱,你必须使用上下文菜单作为意见箱制作你的自定义插件,请从这里查看关于制作ckeditor插件的基本知识的链接 a link

将其添加到config.js,其中autocomplete是插件的名称

config.extraPlugins = 'autocomplete';

然后在ckeditor文件夹中创建以下目录结构/文件

ckeditor->plugins->autocomplete->plugin.js

将以下内容放在plugin.js文件中

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

                     var autocompleteCommand = editor.addCommand('autocomplete',{
                        exec : function(editor) {

我们需要在文档中创建一个虚拟跨度来计算要显示的菜单的当前位置

var dummyElement = editor.document
                                    .createElement('span');
                            editor.insertElement(dummyElement);

                            var x = 0;
                            var y = 0;

                            var obj = dummyElement.$;

                            while (obj.offsetParent) {
                                x += obj.offsetLeft;
                                y += obj.offsetTop;
                                obj = obj.offsetParent;
                            }
                            x += obj.offsetLeft;
                            y += obj.offsetTop;

                            dummyElement.remove();

计算完位置后,我们删除元素并调用方法来显示建议(放在上下文菜单中,在下一个函数中配置)

editor.contextMenu.show(editor.document
                                    .getBody(),null,x,y);
                        }
                    });
                },

这是编辑器上的监听器绑定,用于检查当前密钥是否为#,CKEDITOR.SHIFT 51是#的组合键

afterInit : function(editor) {
                    editor.on('key',function(evt) {
                        if (evt.data.keyCode == CKEDITOR.SHIFT + 51) {
                            editor.execCommand('autocomplete');
                        }
                    });

在ckeditor准备好之后,将从外部jquery调用reloadSuggetionBox命令以生成菜单

var firstExecution = true;
                    var dataElement = {};

                     editor.addCommand('reloadSuggetionBox',{
                            exec : function(editor) {
                                if (editor.contextMenu) {
                                    dataElement = {};
                                    editor.addMenuGroup('suggestionBoxGroup');

                            $.each(Suggestions,function(i,suggestion)
                            {
                                    var suggestionBoxItem = "suggestionBoxItem"+ i; 
                                    dataElement[suggestionBoxItem] = CKEDITOR.TRISTATE_OFF;
                                    editor.addMenuItem(suggestionBoxItem,{
                                        id : suggestion.id,label : suggestion.label,group : 'suggestionBoxGroup',icon  : null,onClick : function() {
                                            var data = editor.getData();
                                            var selection = editor.getSelection();
                                            var element = selection.getStartElement();
                                            var ranges = selection.getRanges();
                                            ranges[0].setStart(element.getFirst(),0);
                                            ranges[0].setEnd(element.getFirst(),0);
                                            editor.insertHtml(this.id + ' ');
                                            },});
                                    });

                                    if(firstExecution == true)
                                        {
                                            editor.contextMenu.addListener(function(element) {
                                                return dataElement;
                                            });
                                        firstExecution = false;
                                        }
                                }
                            }
                     });

                    delete editor._.menuItems.paste;
                },});

这里的“建议”是存在于页面某处的变量,其中包含一个具有“id”和“label”的对象列表,以便在建议中显示.

现在为了配置这些建议,请执行以下jquery代码,在此之后,每当按下“#”时,将显示建议

$('textarea').ckeditor();
CKEDITOR.on( 'instanceReady',function( evt ) {
        CKEDITOR.instances.contractData.execCommand('reloadSuggetionBox');
    });

这将加载ckeditor(contractData是我的ckeditor实例的名称)并配置插件以显示当前存在于“Suggestions”变量中的建议,任何时候你需要刷新/更改你需要在重新加载后调用此函数的建议“建议“变量

CKEDITOR.instances.contractData.execCommand('reloadSuggetionBox');

如果您对此工作有任何疑问,请告诉我.

在我的回购中找到可下载的插件

http://navalgandhi1989.github.io/ckeditor-autocomplete-suggestions-plugin/