是否有可能使textarea成爲ACE編輯器？

Question

我看到一個相似的主題here，但我找不到答案。我試圖將Ace編輯器連接到textarea，但未成功。然後我發現「ace works only on divs」。

我寧願將編輯器連接到textarea，而不是div。那麼，是否有可能將Ace連接到textarea？

提前致謝！

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

，並以取代textarea的編輯

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的textarea擴展名https://github.com/ajaxorg/ace/blob/master/lib/ace/ext/textarea.js