va009039の日記: Aceコードエディタを使ってみた(1)

オンラインコンパイラのエディタがフォームのtextarea では辛いので、Aceコードエディタに変更してみた。(上の画像)

エディタの縦サイズをpxで絶対値にするなら組込みには難しくないが、ブラウザのサイズに追従するようにするには面倒。
とりあえず、組込み例の全画面で左にメニューエリアを空けるように配置してみた。スタイルシートでは position が必要らしい。

以下テンプレートのHTMLファイルです。

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js"></script>
<style type="text/css" media="screen">
    #menu { width: 90px; }
    #editor {
        position:absolute;
        left: 90px;
        right: 0px;
        top: 0px;
        bottom: 0px;
    }
</style>
<script>
$(function(){
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/textmate");
    editor.getSession().setMode("ace/mode/python");
    editor.getSession().setTabSize(4);
    editor.getSession().setUseSoftTabs(true);
    $("#compile").click(function(){
        var source = editor.getValue();
        console.log(source);
        $("#source").attr("value", source);
        $("#msg").html("");
    });
});
</script>
<title>compiler</title>
</head>
<body>
<div id="menu">
  <a href="">compiler</a>
  <div id="filename">main.py</div>
  <form action="" method="post">
    <input type="hidden" id="source" name="source">
    <input type="submit" id="compile" value="compile">
  </form>
  <div id="msg">{{msg}}</div>
</div>
<div id="editor">{{source}}</div>
</body>
</html>

(2013/3/5)
---

va009039の日記

2013年3月5日火曜日

Aceコードエディタを使ってみた(1)

0 件のコメント: