web-dev-qa-db-ja.com

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

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

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

  2. その値を取得および設定する方法は？

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

javascriptjqueryace-editor
58
ShankarSangoli

[〜＃〜] 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ページです 。

私が試したことのない有料のものもあります（そして今は思い出せません）。見つけることができれば、後で更新されます。

120
Mrchief

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

    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);                
        });
    }

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

15
Ben Foster

私は隠された入力でこの問題を解決します:)

    <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>
8
SelçukDERE

Htmlのタグでaceエディターを初期化したと仮定しましょう。例：_<div id="MyAceEditor">this the editor place holder</div>_。

Javascriptセクションで、ace.jsを読み込んだ後、

最初のステップは、以下のようにエディターのインスタンスを見つけることです。

_var editor = ace.edit("MyAceEditor");
_

Aceエディターから値を取得するには、以下のようにgetValue（）メソッドを使用します。

_var myCode = editor.getSession().getValue();
_

値をace editor（エディターにコードをプッシュする）に設定するには、以下のようにsetValue()メソッドを使用します。

_editor.getSession().setValue("write your code here");
_
6
Sairam Venkata
var editor = AceEditor.getCurrentFileEditor("MyEditor");

これは、現在のエディターオブジェクトを返します。

var code = editor.getValue();

これにより、エディター内のテキストが返されます。

0
Nithish