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

Posted 2023-05-07

【中文标题】我如何从 ACE 编辑器中获得价值？

【英文标题】：How do I get value from ACE editor?

【发布时间】：2012-02-16 08:14:28

【问题描述】：

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

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

如何获取和设置它的值？

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

【问题讨论】：

哦，真是一团糟。现在称为“ace”的编辑器为 Cloud9 IDE (cloud9-ide) 提供支持。编辑器引擎以前称为 Skywriter (skywriter)，而 that 以前称为 Bespin (bespin, embedded-bespin)。烦人的是，当前的ace 标签对于编辑器来说是not。

@Charles：你的意思是……？

@Mrchief，一件事的四个标签是一件坏事。不过，感谢您击败我创建新标签。除非你在我之前得到它，否则我将浏览其他标签并将新标签添加到相关问题中。

@Charles：可能是也可能不是。 ace 编辑器是一个 javascript 的东西，需要 JS 标记。由于 OP 也在寻找与 jQuery 的集成，因此 jQuery 也很有意义。我删除了不正确的“ace”标签。

【参考方案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 有用或难以集成。

Here's a Wiki page for comparision of such editors.

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

【讨论】：

Ace vs CodeMirror 1. 因此，如果您需要一个非常小的编辑器，或者不喜欢 ace 的工作方式并想重新实现其中的大部分，Codemirror 是更好的选择。 2. 但是，如果您需要一个与桌面编辑器相当的编辑器，而无需添加您自己的 300kb 代码，那么恕我直言，ace 是更好的选择。

ace 对象从何而来？它是在哪里定义的？

如果我这样做，我得到窗口未定义错误任何人都可以指导我是否应该更改配置中的任何内容

【参考方案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);                
        );
    

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

【参考方案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>   

【参考方案4】：

假设我们已经在 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");

【讨论】：

如何在我的打字稿代码中使用 npm install ace editor 来自动化它？

【参考方案5】：

var editor = AceEditor.getCurrentFileEditor("MyEditor");

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

var code = editor.getValue();

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

【讨论】：

如何 npm install ace 以及如何在我的打字稿代码中导入它？你能指导我吗？

【参考方案6】：

使用以下代码获取ace editor的值， 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>

【参考方案7】：

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

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

我以后可以操作。

【参考方案8】：

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

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;