Javascript 如何使textarea成为ACE编辑器？

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

有人有什么指示吗

编辑：

我让editor.html文件处理一个文本区域，但只要添加第二个文本区域，第二个文本区域就不会转换为编辑器

编辑2：

---

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

您可以有多个Ace编辑器。只需给每个textarea一个ID，并为两个ID创建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>

#编辑，编辑2{
位置：绝对位置；
宽度：600px；
高度：400px；
}
一些文本
一些文本
window.onload=函数（）{
变量编辑器=ace.edit（“编辑器”）；
编辑：setTheme（“ace/theme/twilight”）；
var XmlMode=require（“ace/mode/xml”）.mode；
editor.getSession（）.setMode（新的XmlMode（））；
var editor2=ace.edit（“editor2”）；
编辑2.setTheme（“ace/theme/twilight”）；
editor2.getSession（）.setMode（新的XmlMode（））；
};

要创建编辑器，只需执行以下操作：

HTML:

CSS:

它们必须明确定位和大小。通过show（）和hide（），我相信您指的是jQuery函数。我不确定他们是如何做到的，但它不能修改它在DOM中占用的空间。我使用以下命令隐藏和显示：

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

如果使用css属性“display”，它将不起作用

查看此处的wiki，了解如何添加主题、模式等

---

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

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

html

还是直接打电话

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

---

仅当您提交带有给定文本区域的表单时。我不确定这是否是使用Ace的正确方式，但这是它在GitHub上的使用方式，Duncansmart在他的GitHub页面上有一个非常棒的解决方案，它演示了一种将Ace编辑器连接到页面的简单方法

基本上，我们使用

数据编辑器

属性获取所有

元素，并将每个元素转换为ACE编辑器。该示例还设置了一些您应该根据自己的喜好进行自定义的属性，并演示了如何使用

数据

属性设置每个元素的属性，例如使用

数据边沟

显示和隐藏边沟

//使用数据编辑器属性将ACE编辑器连接到所有文本区域
$（函数（）{
$（'textarea[data editor]”）。每个（函数（）{
var textarea=$（此值）；
var mode=textarea.data（'editor'）；
var editDiv=$（''{
位置：'绝对'，
宽度：textarea.width（），
高度：textarea.height（），
'class'：textarea.attr（'class'）
}).insertBefore（文本区域）；
css（'display'，'none'）；
var editor=ace.edit（editDiv[0]）；
editor.renderer.setShowGotter（textarea.data（'gotter'））；
editor.getSession（）.setValue（textarea.val（））；
editor.getSession（）.setMode（“ace/mode/”+mode）；
编辑器.setTheme（“ace/theme/idle_fingers”）；
//在表单提交时复制回文本区域。。。
textarea.closest（'form'）.submit（函数（）{
val（editor.getSession（）.getValue（））；
})
});
});
textarea{
宽度：100%；
}



对于像我这样只想从CDN获得一个使用Ace的最简单、有效的示例的人：



函数（）{
log（'这是一个演示，请尝试键入！'）
}
变量编辑器=ace.edit（“编辑器”）；
编辑：setTheme（“ace/theme/monokai”）；
editor.getSession（）.setMode（“ace/mode/javascript”）；
document.getElementById（“编辑器”）.style.height=“120px”；
除了，没有。如果调用
ace.edit（'code1'）
你会得到垃圾，比如：
…
换句话说，ace.edit试图将自己填充到textarea中，这不是很好。textarea值应该只在表单上更新。提交事件否？此外，根据这一点：不支持textarea替换。那么你的答案是好的。Thx。有时您需要在运行中更新textarea值，例如，为了实现草稿自动保存等。我在使用此方法时遇到了一个问题：文本“选择1或2；”在ace上，编辑器将放置
”选择1OR&nbps；2;'到文本区域。有人能告诉我我做错了什么吗？alexglue，你在你的文本区域设置了空白：nowrap吗？Installero，我的文本区域中没有此css属性。所以，不，我没有。强烈推荐。非常灵活和干净！我对上述代码所做的唯一修改是修改了textarea.css（'visibility'，'hidden'）；到textarea.css（'display'，'none'）；否则我会在屏幕上留下额外的空白screen@NickGoloborodko-这里晚了几年，但我同意，并相应地更新了答案。此外，修复了ace链接，使代码片段再次工作。这家伙有一个非常棒的解决方案：我看到有人被否决了。。。这对你不管用吗？
#code1, code2 { 
  position: absolute;
  width: 400px;
  height: 50px;
}

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

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

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