Edit Area

　Edit AreaにはJavaなどの言語をハイライトするためのファイルがいくつかあるけど、このファイルを作るためのメモメモ・・・

　新たに言語をハイライトするためにはこんな感じでファイルを作る。’ほげほげ言語’ってのがあったとする。そうすると、edit_area/reg_syntax/にhoge.jsとか言う感じでファイルを作り、こんな構造で内容を記述。

editAreaLoader.load_syntax["hoge"] = {  hogeはhoge.jsのhoge
	'COMMENT_SINGLE' : {１行コメントの識別子の配列（例：BASICの場合は'）}
	,'COMMENT_MULTI' : {複数行コメントの識別子の開始と終了を入れる}
	,'QUOTEMARKS' : {文字列を識別するために使うダブルクォートなどの識別子の配列}
	,'KEYWORD_CASE_SENSITIVE' : false 言語が大文字小文字を区別するならtrue
	,'KEYWORDS' : {色付けするキーワードの配列}
	,'OPERATORS' :[色付けするオペレータの配列]
	,'DELIMITERS' :[色付けする区切り文字の配列]
	,'STYLES' : {上記で記述したもののスタイルを記述}
};

　下は、単にテキストを表示したいときがあったので作ってみた。って、タダのテスト。え？こんなの誰でも作れるって？？

editAreaLoader.load_syntax["ptext"] = {
	'COMMENT_SINGLE' : {}
	,'COMMENT_MULTI' : {}
	,'QUOTEMARKS' : {}
	,'KEYWORD_CASE_SENSITIVE' : false
	,'KEYWORDS' : {}
	,'OPERATORS' :[]
	,'DELIMITERS' :[]
	,'STYLES' : {}
};

　あとは、普通にinitするときにsyntax_selection_allowにぶち込んでみるとセレクトボックスに表示される。

editAreaLoader.init({
	id: "..."
	,syntax: "ptext"	←　一応デフォルトに指定してみた
	,syntax_selection_allow: "ptext,css,html,js,..."
                                 ~~~~~~~~~~~
	,is_multi_files: false
});

でもこれだけだと、なぜかこんな感じで、セレクトボックスには_syntax_が付いてしまう。なんでー？？

よく探してみたら、languageで指定した言語ファイルで変換かけるようだ。例えばlanguage:jaだったらedit_area/langsに入っているja.jsの中を見てsyntax_...とある部分に注目するとすぐ分かる。今回はptextって物をつくったからsyntax_ptextで"Plain Text"を付けてみた。

editAreaLoader.lang["ja"]={
new_document: "新規作成",
search_button: "検索・置換",
...
syntax_selection: "--Syntax--",
syntax_css: "CSS",
syntax_html: "HTML",
syntax_js: "Javascript",
syntax_ptext: "Plain Text",
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
close_tab: "Close file"
};

　お！できた。

　けっこうこの仕組み面白い。