如何让textarea成为ACE编辑器？

Question

我希望能够将页面上的特定textareas转换为ACE编辑器.

有人有任何指示吗？

编辑:

我有一个使用textarea的editor.html文件,但是只要我添加第二个,第二个就不会转换为编辑器.

编辑2:

我决定废弃几个想法,而是在一个新窗口中打开一个.我的新困境是当我隐藏()并显示()textarea时,显示器出错了.有任何想法吗？

Answer 1

据我了解Ace的想法,你不应该让textarea成为Ace编辑器本身.您应该创建一个额外的div并使用.getSession()函数更新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());

只有当您使用给定的textarea提交表单时.我不确定这是否是使用Ace的正确方法,但它是在GitHub上使用它的方式.

Answer 2

Duncansmart在他的github页面上有一个非常棒的解决方案,progressive-ace,演示了一种将ACE编辑器连接到页面的简单方法.

基本上我们<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>

Answer 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>