是否可以将 textarea 设为 ACE 编辑器？答案

【问题标题】：Is it possible to make a textarea an ACE editor?是否可以将 textarea 设为 ACE 编辑器？
【发布时间】：2014-06-16 03:53:36
【问题描述】：

我看到了一个类似的主题here，但我找不到答案。我正在尝试将 Ace 编辑器连接到 textarea，但未成功。然后我发现“ace works only on divs.”

我更喜欢将编辑器连接到 textarea，而不是 div。那么，是否可以将 Ace 连接到 textarea？

提前致谢！

【问题讨论】：

不确定 Ace，但我知道 CodeMirror 具有该功能。
@Mosho 是的，我知道，我已经尝试过 CodeMirror，但无论如何感谢您的回答。

标签： javascript textarea ace-editor

【解决方案1】：

这要看你替换后想对textarea做什么，但是用几行js就可以轻松搞定

// create new ace instance
var editor = ace.edit(document.createElement("div"))
editor.session.setValue(textArea.value)
// set size
editor.container.style.height = textArea.clientHeight + "px";
editor.container.style.width = textArea.clientWidth + "px";
// replace textarea with the editor
textArea.parentNode.replaceChild(editor.container, textArea)
// trigger redraw of the editor
editor.resize()

并用文本区域替换编辑器

var value = editor.getValue()
var start = editor.session.doc.positionToIndex(editor.selection.getRange().start)
var end   = editor.session.doc.positionToIndex(editor.selection.getRange().end)
textArea.value = value
textArea.setSelectionRange(start, end)
editor.container.parentNode.replaceChild(textArea, editor.container)
editor.destroy()

您也可以尝试使用来自 ace https://github.com/ajaxorg/ace/blob/master/lib/ace/ext/textarea.js 的 textarea 扩展

【讨论】：