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

我第一次使用ACE编辑器。 我有以下相关的问题。

  1. 如何在页面上findACE编辑器的实例？ 我不想维护一个将保存编辑器实例的全局variables。 我需要find它的实例。

  2. 如何获得和设定其价值？

我可以提供比ACE编辑器更好的编辑器的build议，它将支持几乎所有types的语言/标记/ CSS等，并与jQuery高度集成。

根据他们的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有用或难于集成。

这里是一个维基页面来比较这些编辑 。

还有一个我还没有付费的付费（现在我不记得了）。 稍后如果我能find它会更新。

为了保存编辑器的内容，我在它之前放置了一个隐藏的input，并初始化编辑器，如下所示： 

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

当我的表单被提交时，我们得到编辑器的值，并将其复制到隐藏的input。

让我们假设我们已经在html中的标签上初始化了ace编辑器。 EX： <div id="MyAceEditor">this the editor place holder</div> 。

在javascript部分，加载ace.js之后，

第一步是find你的编辑器的实例如下。 

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

要从ace编辑器获取值，请使用getValue（）方法如下。 

 var myCode = editor.getSession().getValue();

要将值设置为ace编辑器（将某些代码推送到编辑器中），请使用setValue()方法，如下所示。 

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

我用一个隐藏的input来解决这个问题:) 

  <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>
    Interesting Posts

    为ace编辑器设置值而不select整个编辑器