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

Aceコードエディタをブラウザの縦サイズに追従するようにしてみた。

windowからのリサイズのイベントで、height()から適当なサイズを差し引いて、エディタ用のdivボックスのheightに再設定しています。
この方法が正しいのかわからないが、一応動いているようです。

更に見栄えを良くするために、Bootstrap のbutton, icon, tab, alert を使ってみました。padding marjin の使い方がよくわかってないのですが、タブエディタみたいなデザインを作ることが出来ました。

以下テンプレートの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>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css" media="screen">
    #editor {
        position: relative;
        padding : 0px;
        margin : 0px;
        height: 500px;
    }
</style>
<script>
$(function(){
    var msg = $("#msg").text();
    if (msg == "") {
        $(".alert").alert('close');
    }
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/textmate");
    editor.session.setMode("ace/mode/python");
    editor.session.setTabSize(4);
    editor.session.setUseSoftTabs(true);
    editor.setShowInvisibles(true);
    editor.setDisplayIndentGuides(true);
    
    var editor_resize = function() {
        var height = $(window).height() - 180;
        console.log(height);
        height = Math.max(height, 200);
        $("#editor").css("height", height + "px");
        editor.resize()
    };
    
    editor_resize();
    
    $(window).resize(function(){
        editor_resize();
    });
    
    $("#compile").click(function(){
        console.log("compile");
        var source = editor.getValue();
        console.log(source);
        $("#source").attr("value", source);
        $("form").submit();
    });

    $("#undo").click(function(){
        editor.undo();
    });
    $("#redo").click(function(){
        editor.redo();
    });
});
</script>
<title>python-on-a-chip compiler</title>
</head>
<body>
<form action="" method="post" style="display:none;">
<input type="hidden" id="source" name="source" value="">
<input type="hidden" id="filename" name="filename" value="main.py">
</form>
<div class="container-fluid">
    <div id="header">
    <h3><a href="">python-on-a-chip compiler</a></h3>
    </div>
    <div class="row-fluid">
        <div class="span12">

<div class="alert alert-error">
<button class="close" data-dismiss="alert">&times;</button>
<p id="msg">{{msg}}</p>
</div>

<div class="btn-toolbar" style="margin:2px;">
<div class="btn-group">
  <button class="btn btn-primary" data-loading-text="compiling..." id="compile"><i class="icon-download-alt icon-white"></i>compile</button>
</div>
<div class="btn-group">
  <button class="btn" id="undo"><i class="icon-step-backward"></i>undo</button>
  <button class="btn" id="redo"><i class="icon-step-forward"></i>redo</button>
</div>
</div>
<ul class="nav nav-tabs" id="myTab" style="margin:0px;">
  <li class="active"><a href="#" style="padding:3px;">main.py</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="editor">{{source}}</div>
</div>
        </div>
    </div>
    <div id="footer" style="padding:10px;">
    <img src="https://developers.google.com/appengine/images/appengine-silver-120x30.gif" 
alt="Powered by Google App Engine" />
    </div>
</div>
</body>
</html>

(2013/3/8)
---

va009039の日記

2013年3月8日金曜日

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

0 件のコメント: