Ckeditor与自动完成？

Question

是否有可能以某种方式实现jquery自动完成到ckeditor？创建一个按钮并不难，但可以将它硬连线到自动完成，所以下一个单词被输入，直到再次按下按钮...？

任何人，谁做了远程类似的东西，请让我知道。或者，如果这是不可能的，一个自动完成搜索的弹出窗口，然后点击/选择它会将该选定的项目添加到ckeditor textarea /当前光标位置（也许作为一个链接...）？

尽量不伸得过长，当然:)

Answer 1

我做远程类似的东西，不与CKEdit但markItUp。

自动完成工作由基于jQuery UI的a plugin完成。

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

如果您可以将您的wysiwyg文本框转换为标记编辑器，那么令人惊喜的是markItUp和自动完成插件在一起播放得非常好。只需设置您的textarea为markItUp，然后启用自动完成。 markItUp文档很好，插件不一样。因为它有一个演示项目。

Answer 2

为了使一个意见箱，你必须让你的自定义插件使用上下文菜单意见箱，请查看链接，从这里制造的CKEditor插件a link

添加此基础知识您config.js，其中自动完成是插件

config.extraPlugins = 'autocomplete'; 

然后创建在CKEditor的文件夹下面的目录结构/文件名

ckeditor->plugins->autocomplete->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(); 

计算后你plugin.js以下内容的文件该位置，我们删除元素并调用方法来显示建议（置于上下文菜单中，它们在下一个函数中配置）

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

reloadSuggetionBox组合键命令将从您的外部jQuery的调用生成菜单刚过CKEditor的准备

    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的实例），并配置插件显示的建议当前存在的int“建议”的变量，任何时候你需要刷新/改变重装“建议”变量之后，你只需要调用这个函数的建议

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

让我知道如果你得到这个工作有任何问题。

查找我的回购可下载插件在

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