如何从ACE编辑器获得价值？

Question

我是ACE第一次使用编辑器.我有以下与此相关的问题.

1. 如何ACE在页面上找到编辑器实例？我不想维护一个包含编辑器实例的全局变量.我需要根据需要找到它的实例.

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>   

Answer 4

让我们假设我们已经在html中的标签上初始化了ace编辑器.EX : <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编辑器(将某些代码推送到编辑器中),请使用setValue()如下方法.

editor.getSession().setValue("write your code here");