CodeMirror ( http://codemirror.net/ ) をいくつかの追加機能を備えた基本的なテキスト エディターとして使用しようとしています。そのうちの 1 つは、元の文字列内の位置によって指定された特定の単語または単語のグループを強調表示することです。強調表示したい部分文字列位置のリストを格納する外部構造があります。この構造体は、各要素がテキスト行を表し、強調表示される部分文字列の位置を持つオブジェクトの配列を含む配列です。例として、次のテキスト文字列があります。
The moon
is pale and round
as is
also the sun
ハイライトする言葉は「月」「淡い」「丸」「太陽」です。したがって、強調表示の構造は次のようになります。
[
[ { iStart:4, iEnd:7 } ], // "moon"
[ { iStart:3, iEnd:6 }, { iStart:12, iEnd:16 } ], // "pale" and "round"
[],
[ { iStart:9, iEnd:11 } ] // "sun"
]
これを実現するために、最初にカスタム言語モードを作成しようとしましたが、成功しませんでした (主な理由は、CodeMirror が行ではなくトークンを使用しているように見えるという事実を管理する方法がわからなかったためです。明らかに行を知る必要があります。現在のトークンは、ハイライト構造から正しいデータを取得するために配置されます)。
次に、次のように、手動で SPAN タグを追加するだけで強調表示を適用する外部関数を作成してみました。
function highlightText()
{
console.log( "highlightText()" );
// Get a reference to the text lines in the code editor
var codeLines = $("#editorContainer .CodeMirror-code pre>span" );
for( var i=0; i<colorSegments.length; i++ ){
// If there's text to be highlighted in this line...
if( colorSegments[i] && colorSegments[i].length > 0 ){
// Get the right element and do so
var lineElement = codeLines[i];
highlightWordsInLine( lineElement, colorSegments[i] );
}
}
}
function highlightWordsInLine(element, positions) {
// Get the raw text
var str = $( element ).text();
// Build a new string with highlighting tags.
// Start
var out = str.substr(0, positions[0].iStart);
for( var j=0; j<positions.length; j++ ){
var position = positions[j];
// Apply the highlighting tag
out += '<span class="cm-s-ambiance cm-relation">';
out += str.substr( position.iStart, position.iEnd - position.iStart + 1);
out += '</span>';
// Do not forget to incluide unhighlighted text in between
if( j < positions.length-1 ){
out += str.substr( position.iEnd - position.iStart + 1, positions[j+1].iStart );
}
}
// Wrap up to end of line
out += str.substr( position.iEnd + 1);
// Reset the html element value including applied highlight tags
element.innerHTML = out;
}
これが非常に汚いアプローチであることは理解しています。コード エディター内のテキストの一部が選択できなくなったり、その他のバグが発生したりするため、実際には 100% は機能しませんが、少なくとも強調表示を制御することに成功しました。
だから私の質問は、これを行う正しい方法は何ですか? 言語モードのアプローチに固執する必要がある場合、どのようにすればよいですか?
Ace ( http://ace.c9.io/#nav=higlighter ) も検討するよう提案されましたが、キーワード リストや正規表現規則。
前もって感謝します。