jquery - 带有自动完成功能的ckeditor？

Question

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

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

当然尽量不要过度:)

Answer 1

In order to make a suggestion box, you will have to make your custom plugin to use context menu as suggestion box, please check out the link for the basic knowledge of making ckeditor plugin from here a link

Add this to your config.js, where autocomplete is name of the plugin

config.extraPlugins = 'autocomplete';

Then create a following directory structure/file in the ckeditor folder

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

Put the following content in your plugin.js file

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

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

We will need to create a dummy span in the document to calculate the current position of the menu to be shown

                            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();

After calculation the position, we remove the element and call the method to show the suggestions (placed in the context menu, which are configured in next function)

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

Here is the listener bind on editor to check whether the current key is a # or not, CKEDITOR.SHIFT + 51 is the key combination for #

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

reloadSuggetionBox command will be called from your external jquery to generate the menu just after the ckeditor is ready

                    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;
                },
            });

Here "Suggestions" is the variable present somewhere on your page with holds a list of object having a 'id' and 'label' to be shown in suggestion.

Now in order to configure these suggestions, please perform the following jquery code, after this, whenever '#' is pressed, suggestions will be shown

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

This will load the ckeditor(contractData is name of my ckeditor instance) and configure the plugin to show suggestions currently present int the "Suggestions" variable, anytime you need to refresh/change the suggestions you just need to call this function after reloading "Suggestions" variable

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

Let me know if you get any problem on getting this working.

Find the downloadable plugin at my repo at

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

Answer 2

我远程做了类似的事情，不是用 CKEdit 而是用markItUp。

自动完成工作由基于 jQuery UI的插件完成。

我很难在 CKEdit 文本区域中集成自动完成功能。然后我更好地反映并改变了要求。我更喜欢标记编辑器而不是 WYSIWYG 编辑器（类似文字处理器）。也许这不适用于你，但也考虑评估这个观点。

如果您可以将所见即所得的文本框变成标记编辑器，那么令人惊喜的是 markItUp 和自动完成插件可以很好地配合使用。只需为 markItUp 设置 textarea，然后启用自动完成。markItUp 文档很好，插件不一样。为此，有一个演示项目。