77

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

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

  2. 如何获取和设置它的值？

我愿意为任何比ACE编辑器更好的编辑器提供建议，该编辑器将支持几乎所有类型的语言/标记/css等并与jQuery.

4

8 回答 8

148

根据他们的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 页面。

还有一个付费的，我还没有尝试过（我现在不记得了）。以后如果能找到会更新。

于 2012-01-23T18:32:49.890 回答
17

为了保存编辑器的内容，我在它之前放置了一个隐藏的输入，并像这样初始化编辑器：

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

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

于 2012-06-13T11:25:59.663 回答
8

我用隐藏的输入解决了这个问题:)

    <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>
于 2014-05-31T00:39:14.993 回答
7

假设我们已经在 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 编辑器（将一些代码推送到编辑器中），请使用setValue()以下方法。

editor.getSession().setValue("write your code here");
于 2013-11-29T07:35:35.007 回答
0 
var editor = AceEditor.getCurrentFileEditor("MyEditor");

这将返回当前的编辑器对象

var code = editor.getValue();

这将返回编辑器中的文本。

于 2019-06-26T18:36:22.027 回答
0

使用以下代码获取ace编辑器的值，html会有

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

然后

<script >
 var some = $('#aceEditor');

 some.keyup(function() {
  var code = editor.getSession().getValue();
  $.ajax({
       type: "POST",
       url: "{% url 'creatd-new' %}",
       data: {'code':code},
       success: function (data) {
           console.log("foo");
       }
     });
     }
      </script>
于 2019-12-15T10:54:31.317 回答
0

我为 load 事件添加了一个监听器，然后我得到了实例：

onLoad={(editor) => {
    this.sourceEditor=editor;
}}

我以后可以操纵它。

于 2020-06-09T22:07:32.240 回答
0

在反应下面的简单添加行：

onChange={(value) => handleAceText(value)}

import React from 'react';
import ReactAce from 'react-ace-editor';

const CodeEditor = ({ handleAceText, aceRef }) => {
  return (
    <ReactAce
      mode='html'
      theme='eclipse'
      setReadOnly={false}
      onChange={(value) => handleAceText(value)}
      style={{ height: '300px' }}
      ref={aceRef}
    />
  );
};

export default CodeEditor;
于 2021-01-28T10:59:56.157 回答