webアプリにACEエディタを埋め込む方法

プログラミング

ブラウザ上で動作するエディタにACEエディタがあります． これはCloud9IDEの一部でJavaScriptで書かれたエディタです．

準備としてGithubからACEのJavaScripファイルをダウンロードしてください． https://github.com/ajaxorg/ace-builds

src-min-noconflictフォルダをhtmlと同じディレクトリに配置し，以下のHTMLを実行してください．

<!DOCTYPE html>
<html lang=en,ja>
<header>
  <meta charset="utf8">
  <title>ACE Editor</title>
  <style type="text/css" media="screen">
    #editor { 
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
</style>
</header>
<body>
  <div id="editor">
  </div>
  <script src="./src-min-noconflict/ace.js" type="text/javascript" charset="utf-8">
  </script>
  <script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");
  </script>
</body>
</html>