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

75

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

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

如何获得并设置其价值？

对于愿意提供比ACE几乎所有类型的Language / markup / css等支持并与高度集成的Editor更好的编辑器，我乐于提出建议jQuery。

javascript jquery ace-editor

— 香卡·桑格里
source

5

哦，真是一团糟。现在称为“ ace”的编辑器为Cloud9 IDE（cloud9-ide）提供了动力。编辑引擎的前身为Skywriter（skywriter），和该前身为贝斯平（贝斯平，嵌入贝斯平）。令人讨厌的是，当前的ace标签不适用于编辑器。

— 查尔斯

@查尔斯：你的意思是...？

— Mrchief 2012年

@Mrchief，一件事情的四个标签是一件坏事。不过，感谢您殴打我创建新标签。除非您在我之前得到它，否则我将仔细研究其他标签并将新标签添加到相关问题中。

— 查尔斯

@查尔斯：可能会也可能不会。ace编辑器是Java脚本，需要JS标签。由于OP也正在寻求与jQuery集成，因此jQuery也很有意义。我删除了错误的“ ace”标签。

— Mrchief 2012年

143

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

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

— 恶作剧
source

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

— igaurav 2015年

1

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

— Manu Chadha

如果执行此操作，则会得到未定义的窗口错误，如果我更改配置中的任何内容，任何人都可以指导我

— Mia

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

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

— 本·福斯特
source

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>

— 塞尔丘克
source

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

— 赛拉姆·文卡塔（Sairam Venkata）
source

如何在我的打字稿代码中使用npm安装ace编辑器以使其自动化？

— 米娅

0

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

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

var code = editor.getValue();

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

— 虚无
source

如何npm install ace以及如何将其导入我的打字稿代码中？你可以指导我吗？

— 米娅

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>

— 之前
source

0

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

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

我以后可以处理。

— gal007
source