javascript - ACEエディターから値を取得するにはどうすればよいですか？

Question

ACE初めてエディターを使用しています。それに関連する以下の質問があります。

1. ACEページ上でeditorのインスタンスを見つけるにはどうすればよいですか？エディターインスタンスを保持するグローバル変数を維持したくありません。そのインスタンスをオンデマンドで見つける必要があります。

2. その値を取得して設定する方法は？

ACEほぼすべてのタイプの言語/マークアップ/cssなどをサポートし、と高度に統合されたエディターよりも優れたエディターの提案を受け付けていjQueryます。

Answer 1

彼らのAPIごとに：

マークアップ:

<div id="aceEditor" style="height: 500px; width: 500px">some text</div>

インスタンスの検索:

var editor = ace.edit("aceEditor");

値の取得/設定:

var code = editor.getValue();

editor.setValue("new code here");

私の経験に基づくと、Ace は私が見た中で最高のコード エディターです。CodeMirrorなど、他にもいくつかありますが、Ace よりも有用性が低いか、統合が難しいことがわかりました。

このようなエディタを比較するための Wiki ページを次に示します。

私が試していない有料のものもあります（今のところ思い出せません）。後で見つけたら更新します。

Answer 2

エディターの内容を保存するために、その直前に非表示の入力を配置し、次のようにエディターを初期化しました。

    var $editor = $('#editor');
    if ($editor.length > 0) {
        var editor = ace.edit('editor');
        editor.session.setMode("ace/mode/css");
        $editor.closest('form').submit(function() {
            var code = editor.getValue();
            $editor.prev('input[type=hidden]').val(code);                
        });
    }

フォームが送信されると、エディターの値を取得して非表示の入力にコピーします。

Answer 3

隠し入力でこの問題を解決します:)

    <input type="hidden" name="komutdosyasi" style="display: none;">
    <script src="/lib/aceeditor/src-min/ace.js" type="text/javascript" charset="utf-8"></script>

<script>
    var editor = ace.edit('editor');
        editor.session.setMode("ace/mode/batchfile");
        editor.setTheme("ace/theme/monokai");

    var input = $('input[name="komutdosyasi"]');
        editor.getSession().on("change", function () {
        input.val(editor.getSession().getValue());
    });
</script>