Javascript 如何使 textarea 成为 ACE 编辑器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6440439/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make a textarea an ACE editor?
提问by Paul
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. Any ideas?
我决定放弃拥有多个的想法，而是在新窗口中打开一个。我的新困境是，当我 hide() 和 show() 文本区域时，显示出错了。有任何想法吗？
回答by installero
As far as I understood the idea of Ace, you shouldn't make a textareaan Ace editor itself. You should create an additional div and update textarea using .getSession()function instead.
据我了解 Ace 的想法，你不应该让textarea成为 Ace 编辑器本身。您应该创建一个额外的 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. I'm not sure whether this is the right way to use Ace, but it's the way it is used on GitHub.
仅当您使用给定的 textarea 提交表单时。我不确定这是否是使用 Ace 的正确方式，但它是在GitHub 上使用的方式。
回答by billynoah
Duncansmart has a pretty awesome solution on his github page, progressive-acewhich 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-editorattribute and convert each to an ACE editor. The example also sets some properties which you should customize to your liking, and demonstrates how you can use dataattributes to set properties per element like showing and hiding the gutter with data-gutter.
基本上，我们获取所有<textarea>具有该data-editor属性的元素并将每个元素转换为 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>回答by Breck
You can have multiple Ace Editors. Just give each textarea an ID and create an Ace Editor for both IDS like so:
您可以拥有多个 Ace 编辑器。只需给每个 textarea 一个 ID 并为两个 IDS 创建一个 Ace Editor，如下所示：
<style>
#editor, #editor2 {
position: absolute;
width: 600px;
height: 400px;
}
</style>
<div style="position:relative; height: 450px; " >
<div id="editor">some text</div>
</div>
<div style="position:relative; height: 450px; " >
<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>
回答by Bobby
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. I'm not sure exactly how they do it, but it cannot modify the space it takes up in the DOM. I hide and show using:
它们必须明确定位和调整大小。通过 show() 和 hide() 我相信您指的是 jQuery 函数。我不确定他们是如何做到的，但它不能修改它在 DOM 中占用的空间。我隐藏和显示使用：
$('#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，它们可以是您想要的任何元素。
回答by Nic Scozzaro
For anyone like me 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>