6

jquery オートコンプリートを何らかの方法で ckeditor に実装することは可能ですか? ボタンを作成するのはそれほど難しいことではありませんが、それをオートコンプリートにハードウェア化することは可能で、ボタンが再び押されるまで次の単語が入力されます...?

遠隔地でそういうことをした人は、私に知らせてください。または、それが不可能な場合は、オートコンプリート検索のポップアップ ウィンドウをクリックして選択すると、選択したアイテムが ckeditor textarea/現在のカーソル位置に追加されます (おそらくリンクとして...)?

もちろん、行き過ぎないようにしています:)

4

2 に答える 2

4

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

これを config.js に追加します。オートコンプリートはプラグインの名前です

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

reloadSuggetionBoxコマンドは、ckeditor の準備が整った直後にメニューを生成するために、外部 jquery から呼び出されます。

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

これは ckeditor (contractData は私の ckeditor インスタンスの名前です) をロードし、「Suggestions」変数に現在存在する提案を表示するようにプラグインを構成します。 " 変数

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

ここに画像の説明を入力 ここに画像の説明を入力

これを機能させる上で問題が発生した場合はお知らせください。

私のレポでダウンロード可能なプラグインを見つけてください

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

于 2015-07-11T10:10:25.923 に答える
2

CKEditではなくmarkItUpを使用して、同様のことをリモートで実行しました。

オートコンプリート作業は、jQueryUIに基づくプラグインによって実行されます。

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

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

于 2012-09-16T21:48:43.787 に答える