如何使 textarea 成为 ACE 编辑器？

Question

I'd like to be able to convert specific textareas on a page to be ACE editors.我希望能够将页面上的特定文本区域转换为 ACE 编辑器。

Does anyone have any pointers please?请问有人有任何指点吗？

EDIT:编辑：

I have the the editor.html file working with one textarea, but as soon as I add a second, the second isn't converted to an editor.我有使用一个 textarea 的 editor.html 文件，但是只要我添加第二个，第二个就不会转换为编辑器。

EDIT 2:编辑2：

I decided to scrap the idea of having several, and instead open one up in a new window.我决定放弃拥有多个的想法，而是在新窗口中打开一个。 My new predicament is that when I hide() and show() the textarea, the display goes awry.我的新困境是，当我 hide() 和 show() 文本区域时，显示出错了。 Any ideas?有任何想法吗？

Answer 1

As far as I understood the idea of Ace, you shouldn't make a textarea an Ace editor itself.据我了解 Ace 的想法，你不应该让textarea成为 Ace 编辑器本身。 You should create an additional div and update textarea using .getSession() function instead.您应该创建一个额外的 div 并使用.getSession()函数更新 textarea。

html html

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

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

or just call或者只是打电话

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

only when you submit the form with the given textarea.仅当您使用给定的 textarea 提交表单时。 I'm not sure whether this is the right way to use Ace, but it's the way it is used on GitHub .我不确定这是否是使用 Ace 的正确方式，但它是在GitHub 上使用的方式。

Answer 2

Duncansmart has a pretty awesome solution on his github page, progressive-ace which demonstrates one simple way to hook up an ACE editor to your page. Duncansmart 在他的 github 页面上有一个非常棒的解决方案， progressive-ace ，它演示了一种将 ACE 编辑器连接到页面的简单方法。

Basically we get all <textarea> elements with the data-editor attribute and convert each to an ACE editor.基本上，我们获取所有具有data-editor属性的<textarea>元素，并将每个元素转换为 ACE 编辑器。 The example also sets some properties which you should customize to your liking, and demonstrates how you can use data attributes to set properties per element like showing and hiding the gutter with data-gutter .该示例还设置了一些您应该根据自己的喜好自定义的属性，并演示了如何使用data属性来设置每个元素的属性，例如使用data-gutter显示和隐藏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>

Answer 3

You can have multiple Ace Editors.您可以拥有多个 Ace 编辑器。 Just give each textarea an ID and create an Ace Editor for both IDS like so:只需给每个 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>

Answer 4

For anyone that just wants a minimal, working example of using Ace from the CDN:对于任何只想要使用 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>

Answer 5

To create an editor just do:要创建编辑器，只需执行以下操作：

HTML: HTML：

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

JS: 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: CSS：

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

They must be explicitly positioned and sized.它们必须明确定位和调整大小。 By show() and hide() I believe you are referring to the jQuery functions.通过 show() 和 hide() 我相信您指的是 jQuery 函数。 I'm not sure exactly how they do it, but it cannot modify the space it takes up in the DOM.我不确定他们是如何做到的，但它不能修改它在 DOM 中占用的空间。 I hide and show using:我隐藏和显示使用：

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

If you use the css property 'display' it will not work.如果您使用 css 属性“display”，它将不起作用。

Check out the wiki here for how to add themes, modes, etc... https://github.com/ajaxorg/ace/wiki/Embedding---API在此处查看 wiki，了解如何添加主题、模式等... https://github.com/ajaxorg/ace/wiki/Embedding---API

Note: they do not have to be textareas, they can be whatever element you want.注意：它们不必是 textareas，它们可以是您想要的任何元素。

如何使 textarea 成为 ACE 编辑器？

问题描述

5 个解决方案

解决方案1
162 已采纳 2011-11-02 11:43:57

解决方案2
37 2013-10-22 09:01:13

解决方案3
8 2011-07-28 20:31:27

解决方案4
1 2019-04-20 02:52:36

解决方案5
1 2011-09-19 23:20:41

如何使 textarea 成为 ACE 编辑器？

问题描述

5 个解决方案

解决方案1 162 已采纳 2011-11-02 11:43:57

解决方案2 37 2013-10-22 09:01:13

解决方案3 8 2011-07-28 20:31:27

解决方案4 1 2019-04-20 02:52:36

解决方案5 1 2011-09-19 23:20:41

解决方案1
162 已采纳 2011-11-02 11:43:57

解决方案2
37 2013-10-22 09:01:13

解决方案3
8 2011-07-28 20:31:27

解决方案4
1 2019-04-20 02:52:36

解决方案5
1 2011-09-19 23:20:41