Question

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

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



如何获取和设置其值？

我愿意接受比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更不实用或难以集成。

Here's a Wiki page for comparision of such editors

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

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

Answer 5

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

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

var code = editor.getValue();

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

Answer 6

使用以下代码获取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>

Answer 7

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

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

稍后我可以进行操作。

Answer 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;

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

8 个答案: