如何使 textarea 成为 ACE 编辑器? [英] How do I make a textarea an ACE editor?

问题描述

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

I'd like to be able to convert specific textareas on a page to be ACE editors.

有大佬指点一下吗?

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

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.

编辑 2:

我决定放弃拥有多个的想法，而是在新窗口中打开一个.我的新困境是，当我 hide() 和 show() 文本区域时，显示出错了.有什么想法吗?

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?

推荐答案

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

As far as I understood the idea of Ace, you shouldn't make a textarea an Ace editor itself. You should create an additional div and update textarea using .getSession() function instead.

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 上使用的方式.

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 编辑器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！