Jquery 具有自动完成功能的编辑器？

是否可以在ckeditor中实现jquery自动完成？创建一个按钮并不是那么难，但是有没有可能将其硬连接到自动完成，所以在再次按下按钮之前键入的下一个单词

如果有人做过类似的事，请告诉我。或者，如果不可能，自动完成搜索的弹出窗口，然后单击/选择它会将所选项目添加到ckeditor textarea/当前光标位置，可能作为链接

---

当然，尽量不要做得过火：

我做了一些类似的事情，不是用CKEdit，而是用

自动完成工作是基于jqueryui的

我很难在CKEdit文本区域中集成自动完成功能。然后，我进行了更好的思考并更改了需求。我更喜欢标记编辑器，而不是所见即所得编辑器（WYSIWYG editor）之类的文字处理器。也许这不适用于你，但也要考虑一下这个观点。

---

如果您可以将所见即所得文本框转换为标记编辑器，那么令人惊讶的是markItUp和autocomplete插件可以很好地配合使用。只需为markItUp设置文本区域，然后启用自动完成。markItUp文档是好的，插件则不同。这里有一个演示项目。

为了制作一个建议框，您必须制作自定义插件以使用上下文菜单作为建议框，请从这里查看制作ckeditor插件的基本知识链接

将其添加到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);
                        }
                    });
                },

下面是监听器绑定编辑器，用于检查当前键是否为a键，CKEDITOR.SHIFT+51是

在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”和“标签”将显示在建议中

现在为了配置这些建议，请执行以下jquery代码，之后，无论何时按下，都会显示建议

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

这将加载ckeditorcontractData是我的ckeditor实例的名称，并将插件配置为在建议变量中显示当前存在的建议，任何时候需要刷新/更改建议，您只需在重新加载建议变量后调用此函数

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

如果你在工作中遇到任何问题，请告诉我

在my repo上找到可下载的插件

---

我假设您尝试使用$'element'。是否已自动完成？我的意思是，似乎有输入，你可以简单地调用该元素的autocomplete，而不管父元素是什么

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