オートコンプリート用にcodemirrorで使用できるlibはありますか？

私はcodemirrorエディタを使用しています...私はオートコンプリートを行うときにappareするリスト内の項目をスタイリングするように機能したいので...私はcodemirrorで使用できるlibまたはpluginがあります。 .. 注：codemirrorではなくcodemirrorで使用します。 ...ありがとうございます。オートコンプリート用にcodemirrorで使用できるlibはありますか？

出典

2016-09-23 sara

私は成功しました。私は動的にhintOptionsにオブジェクトとしてすべてのテーブル/列を追加私のメインのウェブページでは

.table.CodeMirror-hint { 
    font-weight: bold; 
    color: black; 
} 

.column.CodeMirror-hint { 
    font-weight: bold; 
    color: black; 
} 

.keyword.CodeMirror-hint { 
    font-weight: bold; 
    color: #BF00FF; 
} 

.builtin.CodeMirror-hint { 
    font-weight: bold; 
    color: #2E64FE; 
}

：ショーhint.cssで、私はいくつかのCSSを追加しました。各テーブルのために私は次のように実行します。

 var tcobjs = []; //table columns array of object 
     for (j=0; j < tablecolumns.length; j++) { 
      tcobjs.push({text:tablecolumns[j],className:"column"}); 
     } 
     hintOptions.tables[table]=tcobjs;

I修正このようなアドオン/ヒント/ SQL-hint.js：

異なり、個々の項目のスタイルを設定する方法

var keywords; 
    var builtin; 

    function getKeywords(editor) { 
    var mode = editor.doc.modeOption; 
    if (mode === "sql") mode = "text/x-sql"; 
    var words = {}; 
    for (var w in CodeMirror.resolveMode(mode).keywords) { words[w] = CodeMirror.resolveMode(mode).keywords[w]; } 
    return words; 
    } 

    function getBuiltin(editor) { 
    var mode = editor.doc.modeOption; 
    if (mode === "sql") mode = "text/x-sql"; 
    var words = {}; 
    for (var w in CodeMirror.resolveMode(mode).builtin) { words[w] = CodeMirror.resolveMode(mode).builtin[w]; } 
    return words; 
    } 

[....] 

    keywords = getKeywords(editor); 
    builtin = getBuiltin(editor); 

[....] 

     addMatches(result, search, tables, function(w) {return {text:w,className:"table"};}); 
     addMatches(result, search, defaultTable, function(w) {return {text:w,className:"table"};}); 
     if (!disableKeywords) 
     addMatches(result, search, keywords, function(w) {return {text:w.toUpperCase(),className:"keyword"};}); 
     addMatches(result, search, builtin, function(w) {return {text:w.toUpperCase(),className:"builtin"};});

出典

2017-05-07 13:21:43 Jan

あなたのソリューションをjsbinに入れることはできますか？ – sara

自分のモードを定義して自分の言葉と自分の機能を持っているように...私はSQLモードを使用しませんでした – sara

はい、hint addonはオートコンプリートに使用できます。そして、addon/hint/show-hint.cssを変更して項目をスタイルすることができます。

出典

2016-10-17 11:43:03 olindk

、そうではないすべてのアイテムに同じスタイルを、ドロップダウンリストには？ – Jan

@Jan単に選択した（言い換えるとアクティブな）アイテムのスタイルを違えば、 'addon/hint/show-hint.css'の' li.CodeMirror-hint-active'のCSSルールを変更する必要があります。あるいは、それぞれのアイテムのスタイルを違うものにしたいのであれば、文字列の代わりにオブジェクトをヒント項目として渡して、それぞれのclassNameを設定する必要があります。詳細については、[hint addon document]（http://codemirror.net/doc/manual.html#addon_show-hint）を参照してください。 – olindk

たとえば、tablenames/columnnames、sql関数（avg、sum、...）とsqlキーワード（select、from、where ...、）を含むドロップダウンがあり、異なる色を使用してこれらをより顕著に区別したい場合.. – Jan

オートコンプリート用にcodemirrorで使用できるlibはありますか？

答えて

関連する問題