【问题标题】: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 扩展

【讨论】:

    猜你喜欢
    • 2011-09-20
    • 2012-03-29
    • 2019-01-01
    • 1970-01-01
    • 2019-11-30
    • 2023-03-18
    • 2011-10-26
    • 2014-12-13
    • 1970-01-01
    相关资源
    最近更新 更多