如何从 ACE 编辑器获取值？

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

  1. 如何在页面上找到 ACE编辑器的实例? 我不想 维护一个全局变量，该变量将保存编辑器实例 需要根据需要找到它的实例

  2. 如何得到并设置它的值？

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

66467 次浏览
小开
最佳答案

根据他们的 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 是我见过的最好的代码编辑器。还有一些其他的，如 代码镜像等，但我发现他们不太有用或难以集成比 Ace。

这里有一个 Wiki 页面，可以对这些编辑器进行比较。

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

小开

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

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

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

小开

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

To set the value to ace editor(to push some code into the editor), use setValue() method as below.

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

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

    <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>
小开 
var editor = AceEditor.getCurrentFileEditor("MyEditor");

这将返回当前编辑器对象

var code = editor.getValue();

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

小开

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

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

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

Which I can manipulate later.

小开

在反应中，它的简单添加行如下:

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;

提交答案