如何使 textarea 成为 ACE 编辑器？答案

【问题标题】：How do I make a textarea an ACE editor?如何使 textarea 成为 ACE 编辑器？
【发布时间】：2011-09-20 09:24:07
【问题描述】：

我希望能够将页面上的特定文本区域转换为 ACE 编辑器。

请问有大神指点一下吗？

编辑：

我的 editor.html 文件与一个文本区域一起工作，但只要我添加第二个，第二个就不会转换为编辑器。

编辑 2：

我决定放弃拥有多个的想法，而是在新窗口中打开一个。我的新困境是，当我隐藏（）和显示（）文本区域时，显示出错了。有什么想法吗？

【问题讨论】：

这家伙有一个非常棒的解决方案：gist.github.com/duncansmart/5267653

标签： javascript textarea ace-editor

【解决方案1】：

就我对 Ace 的理解而言，您不应该让 textarea 本身成为 Ace 编辑器。您应该使用 .getSession() 函数创建一个额外的 div 并更新 textarea。

html

<textarea name="description"/>
<div id="description"/>

js

var editor = ace.edit("description");
var textarea = $('textarea[name="description"]').hide();
editor.getSession().setValue(textarea.val());
editor.getSession().on('change', function(){
  textarea.val(editor.getSession().getValue());
});

或者直接打电话

textarea.val(editor.getSession().getValue());

仅当您提交带有给定文本区域的表单时。我不确定这是否是使用 Ace 的正确方式，但它是在 GitHub 上使用的方式。

【讨论】：

textarea 值只能在 form.submit 事件上更新，不是吗？另外，据此：groups.google.com/group/ace-discuss/browse_thread/thread/… 不支持 textarea 替换。那么你的答案就是好的答案。谢谢。
有时您需要随时更新 textarea 值，例如实现草稿自动保存等。
我在使用这种方法时遇到了问题：发短信“SELECT 1 OR 2;”在 ace.editor 上会将'SELECT&nbsp;1OR&nbps;2;' 放入 textarea。谁能告诉我我做错了什么？
alexglue，您是否在 textarea 上设置了 white-space:nowrap？ github.com/ajaxorg/ace/issues/900
Installero，我的 textarea 上没有这个 css 属性。所以，不，我没有。

【解决方案2】：

Duncansmart 在他的 github 页面上提供了一个非常棒的解决方案，progressive-ace，它演示了一种将 ACE 编辑器连接到您的页面的简单方法。

基本上，我们得到所有具有data-editor 属性的<textarea> 元素，并将每个元素转换为ACE 编辑器。该示例还设置了一些您应该根据自己的喜好自定义的属性，并演示了如何使用data 属性来设置每个元素的属性，例如使用data-gutter 显示和隐藏排水沟。

// Hook up ACE editor to all textareas with data-editor attribute
$(function() {
  $('textarea[data-editor]').each(function() {
    var textarea = $(this);
    var mode = textarea.data('editor');
    var editDiv = $('<div>', {
      position: 'absolute',
      width: textarea.width(),
      height: textarea.height(),
      'class': textarea.attr('class')
    }).insertBefore(textarea);
    textarea.css('display', 'none');
    var editor = ace.edit(editDiv[0]);
    editor.renderer.setShowGutter(textarea.data('gutter'));
    editor.getSession().setValue(textarea.val());
    editor.getSession().setMode("ace/mode/" + mode);
    editor.setTheme("ace/theme/idle_fingers");

    // copy back to textarea on form submit...
    textarea.closest('form').submit(function() {
      textarea.val(editor.getSession().getValue());
    })
  });
});

textarea {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script>
<textarea name="my-xml-editor" data-editor="xml" data-gutter="1" rows="15"></textarea>
<br>
<textarea name="my-markdown-editor" data-editor="markdown" data-gutter="0" rows="15"></textarea>

【讨论】：

强烈推荐。非常灵活和干净！
我对上述代码所做的唯一修改是更改 textarea.css('visibility', 'hidden');到 textarea.css('display', 'none');否则我会在屏幕上获得额外的空白空间
@NickGoloborodko - 在这里晚了几年，但我同意并且我已经相应地更新了答案。此外，修复了 ace 链接，以便 sn-p 再次工作。

【解决方案3】：

您可以拥有多个 Ace 编辑器。只需给每个 textarea 一个 ID 并为两个 IDS 创建一个 Ace 编辑器，如下所示：

<style>
#editor, #editor2 {
    position: absolute;
    width: 600px;
    height: 400px;
}
</style>
<div style="position:relative; height: 450px; " >
&nbsp;
<div id="editor">some text</div>
</div>
<div style="position:relative; height: 450px; " >
&nbsp;
<div id="editor2">some text</div>
</div>
<script src="ace.js" type="text/javascript" charset="utf-8"></script>
<script src="theme-twilight.js" type="text/javascript" charset="utf-8"></script>
<script src="mode-xml.js" type="text/javascript" charset="utf-8"></script>
<script>
window.onload = function() {
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/twilight");
    var XmlMode = require("ace/mode/xml").Mode;
    editor.getSession().setMode(new XmlMode());

    var editor2 = ace.edit("editor2");
    editor2.setTheme("ace/theme/twilight");
    editor2.getSession().setMode(new XmlMode());

};
</script>

【讨论】：

【解决方案4】：

要创建一个编辑器，只需：

HTML：

<textarea id="code1"></textarea>
<textarea id="code2"></textarea>

JS：

var editor1 = ace.edit('code1');
var editor2 = ace.edit('code2');
editor1.getSession().setValue("this text will be in the first editor");
editor2.getSession().setValue("and this in the second");

CSS：

#code1, code2 { 
  position: absolute;
  width: 400px;
  height: 50px;
}

它们必须明确定位和调整大小。通过 show() 和 hide() 我相信您指的是 jQuery 函数。我不确定他们到底是怎么做的，但它不能修改它在 DOM 中占用的空间。我隐藏和显示使用：

$('#code1').css('visibility', 'visible');
$('#code2').css('visibility', 'hidden');

如果你使用 css 属性 'display' 它将不起作用。

在此处查看 wiki，了解如何添加主题、模式等...https://github.com/ajaxorg/ace/wiki/Embedding---API

注意：它们不必是文本区域，它们可以是你想要的任何元素。

【讨论】：

除了，没有。如果你调用ace.edit('code1') 你会得到像<textarea class="ace_editor ace-twilight ace_focus"><div class="ace_gutter">...</textarea> 这样的垃圾，换句话说，ace.edit 试图将自己填充到 textarea 中，这不是很好。

【解决方案5】：

对于任何想要使用 CDN 中的 Ace 的最小工作示例的人：

<!DOCTYPE html>
<html lang="en">

<body style="margin:0">
  <div id="editor">function () { 
  console.log('this is a demo, try typing!')
}
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js" type="text/javascript" charset="utf-8"></script>
  <script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");
    document.getElementById("editor").style.height = "120px";
  </script>
</body>

</html>

【讨论】：