「ace」:Webブラウザ上で動作するエディタを試してみた

16 2月, 2013 (21:19) | html | By: ohishi

Webブラウザ上で動作するテキストエディタ「ace」を試してみたので、メモっておきます。

◆ダウンロードURL

https://github.com/ajaxorg/ace-builds/

・このサイトの「ZIP」ボタンを押し、アーカイブをダウンロードします。
・解凍し「src」フォルダのみサイトにアップロードします。

「src」フォルダと同一レベルに下記のHTMLをアップロードして、ブラウザで開くと
HTMLのソースが色付けされるtextareaが出来上がり。 サンプル
ace

これを、さっそくHTML整形ツールに組み込んでみた。
(上の画像はカラーじゃないですが、HTML整形のほうはカラーでの表示を確認いただけます)

◆サンプルHTMLソース

<style type="text/css">
<!--
#editor {
position: absolute;
width: 500px;
height: 200px;
}
-->
</style>

<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="src/theme-twilight.js" type="text/javascript" charset="utf-8"></script>
<script src="src/mode-html.js" type="text/javascript" charset="utf-8"></script>

<div id="editor"><textarea>some text</textarea></div>
<script>
var editor = ace.edit("editor");
editor.getSession().setMode("ace/mode/html").Mode;
</script>

◆各種言語について

このaceのいいところは、60種類くらいの言語をサポートしていて
上のソースの「HTML」の部分を2か所変更するだけで、各種の言語に合わせて
勝手にカラーで表示するようになります

ただ、Delphiは無いんですよね。

<言語の一覧>
mode-asciidoc.js
mode-c9search.js
mode-c_cpp.js
mode-clojure.js
mode-coffee.js
mode-coldfusion.js
mode-csharp.js
mode-css.js
mode-curly.js
mode-dart.js
mode-diff.js
mode-django.js
mode-dot.js
mode-glsl.js
mode-golang.js
mode-groovy.js
mode-haml.js
mode-haxe.js
mode-html.js
mode-jade.js
mode-java.js
mode-javascript.js
mode-json.js
mode-jsp.js
mode-jsx.js
mode-latex.js
mode-less.js
mode-liquid.js
mode-lisp.js
mode-livescript.js
mode-lua.js
mode-luapage.js
mode-lucene.js
mode-makefile.js
mode-markdown.js
mode-objectivec.js
mode-ocaml.js
mode-perl.js
mode-pgsql.js
mode-php.js
mode-powershell.js
mode-python.js
mode-r.js
mode-rdoc.js
mode-rhtml.js
mode-ruby.js
mode-scad.js
mode-scala.js
mode-scheme.js
mode-scss.js
mode-sh.js
mode-sql.js
mode-stylus.js
mode-svg.js
mode-tcl.js
mode-tex.js
mode-text.js
mode-textile.js
mode-tm_snippet.js
mode-typescript.js
mode-vbscript.js
mode-xml.js
mode-xquery.js
mode-yaml.js

◆2013/02/21追記

使っているうちに、最終行が表示されないことに気付いた。
試しにクラスace_scrollerのoverflow-x:の指定を hiddenにしてみたら、最終行が表示されるようになった

<style type="text/css">
<!--
#editor {
width:99%; height:370px;text-align:left;
}
.ace_scroller {
left: 47px; right: 17px; overflow-x: hidden;
}
-->
</style>

Write a comment