オートコンプリート付きCkeditor？

Question

jqueryオートコンプリートを何とかckeditorに実装できますか？ボタンを作成することはそれほど難しいことではありませんが、それを自動完成させることが可能なのですから、ボタンが再び押されるまで入力されている次の単語は...？

誰かが遠隔からそういったことをした人は、私に知らせてください。または、それが不可能な場合は、オートコンプリート検索のポップアップウィンドウをクリックして、選択したアイテムをckeditor textarea /現在のカーソル位置に追加します（おそらくリンクとして...）？もちろんオーバーリーチしないようにしよう

:)

Answer 1

私はリモートではないCKEditではなくmarkItUpと、その類似した何かをしました。

オートコンプリート作業は、jQuery UIに基づいてa pluginによって行われます。

私はCKEditテキストエリア内にオートコンプリートを統合するのに苦労しました。その後、私はよりよく反映し、要件を変更しました。私はWYSIWYGエディタ（ワープロのような）の代わりにマークアップエディタを好みました。たぶんこれはあなたには当てはまりませんが、この観点も評価することを検討してください。

wysiwygのテキストボックスをマークアップエディタに変えることができれば、markItUpとオートコンプリートプラグインが非常にうまく連動することがうれしいことです。単にtextItaにmarkItUpを設定してから、オートコンプリートを有効にしてください。 markItUp docsは良いですが、プラグインと同じではありません。それのために、デモプロジェクトがあります。

Answer 2

提案ボックスを作成するためには、提案ボックスとしてコンテキストメニューを使用してカスタムプラグインを作成する必要がありますが、ここからCKEditorバージョンのプラグインを作るの基本的な知識のリンクをチェックしてみてくださいa link

これを追加オートコンプリートプラグイン

config.extraPlugins = 'autocomplete'; 

の名前であなたのconfig.jsのに続いてCKEditorバージョンフォルダ

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

で次のディレクトリ構造/ファイルを作成します

我々が計算した後

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

を示さなければ、メニューの現在の位置を計算するために、ドキュメントにダミーのスパンを作成する必要があります

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

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

を提出あなたのplugin.jsに以下の内容を入れて要素を削除し、提案を表示するメソッドを呼び出します（次の関数で設定されるコンテキストメニューに配置されます）。

現在のキーが＃かどうかを確認するためにリスナーをエディタにバインドします。CKEDITOR。SHIFT + 51はreloadSuggetionBoxコマンドが「提案」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; 
       }, 
      }); 

準備ができているだけで後はメニューを生成するために、外部jqueryのから呼び出されます＃

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

のためのキーの組み合わせですあなたのページのどこかに存在する変数には、 'id'と 'label'を持つオブジェクトのリストが含まれています。

今すぐこれらの提案を設定するために、これはCKEditorバージョンをロードする「＃」が押されるたび、提案が

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

が表示されます、この後、次のjQueryコードを実行してください（contractDataはの名前です。私のCKEditorバージョンのインスタンス）と「提案」変数のint現在存在提案を表示するようにプラグインを設定、あなたはあなただけの「提案」変数

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

をリロードした後、この関数を呼び出す必要がある提案を変更/更新する必要があり、いつでも

この問題を解決する上で問題がある場合は教えてください。

私はあなたが、 `$（ '要素'）を使用しようとしたと仮定しています。オートコンプリート（）`すでに？

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