Bagaimana cara menjadikan textarea editor ACE?

Saya ingin dapat mengubah area teks tertentu pada sebuah halaman menjadi editor ACE.

Apakah ada yang punya petunjuk, tolong?

EDIT:

Saya memiliki file editor.html yang bekerja dengan satu textarea, tetapi segera setelah saya menambahkan yang kedua, yang kedua tidak diubah menjadi editor.

EDIT 2:

Saya memutuskan untuk membuang ide untuk memiliki beberapa, dan sebagai gantinya membukanya di jendela baru. Masalah baru saya adalah ketika saya menyembunyikan () dan menampilkan () textarea, tampilan menjadi serba salah. Ada ide?

Sejauh yang saya mengerti tentang ide Ace, Anda seharusnya tidak membuat textarea editor Ace itu sendiri. Anda harus membuat div tambahan dan memperbarui textarea menggunakan fungsi .getSession () sebagai gantinya.

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());
});

atau panggil saja

textarea.val(editor.getSession().getValue());

hanya jika Anda mengirimkan formulir dengan textarea yang diberikan. Saya tidak yakin apakah ini cara yang benar untuk menggunakan Ace, tetapi ini adalah cara yang digunakan di GitHub .

Duncansmart memiliki solusi yang cukup mengagumkan di halaman github-nya, progresif-ace yang menunjukkan satu cara sederhana untuk menghubungkan editor ACE ke halaman Anda.

Pada dasarnya kita mendapatkan semua <textarea>elemen dengan data-editoratribut dan mengubahnya menjadi editor ACE. Contoh ini juga menyetel beberapa properti yang harus Anda sesuaikan dengan keinginan Anda, dan mendemonstrasikan bagaimana Anda dapat menggunakan dataatribut untuk menyetel properti per elemen seperti menampilkan dan menyembunyikan selokan 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>

Anda dapat memiliki beberapa Editor Ace. Berikan saja setiap area teks sebuah ID dan buat Editor Ace untuk kedua IDS seperti ini:

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

Untuk membuat editor, lakukan saja:

HTML:

<textarea id="code1"></textarea>
<textarea id="code2"></textarea>

JS:

var editor1 = ace.edit('code1');
var editor2 = ace.edit('code2');
editor1.getSession().setValue("this text will be in the first editor");
editor2.getSession().setValue("and this in the second");

CSS:

#code1, code2 { 
  position: absolute;
  width: 400px;
  height: 50px;
}

Mereka harus diposisikan dan diukur secara eksplisit. Dengan show () dan hide () Saya yakin Anda mengacu pada fungsi jQuery. Saya tidak yakin persis bagaimana mereka melakukannya, tetapi itu tidak dapat mengubah ruang yang dibutuhkan di DOM. Saya bersembunyi dan menunjukkan menggunakan:

$('#code1').css('visibility', 'visible');
$('#code2').css('visibility', 'hidden');

Jika Anda menggunakan properti css 'display' itu tidak akan bekerja.

Lihat wiki di sini untuk mengetahui cara menambahkan tema, mode, dll ... https://github.com/ajaxorg/ace/wiki/Embedding---API

Catatan: mereka tidak harus textarea, mereka bisa menjadi elemen apapun yang Anda inginkan.

Untuk siapa pun seperti saya yang hanya menginginkan contoh kerja minimal menggunakan Ace dari CDN:

<!DOCTYPE html>
<html lang="en">

<body style="margin:0">
  <div id="editor">function () { 
  console.log('this is a demo, try typing!')
}
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js" type="text/javascript" charset="utf-8"></script>
  <script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");
    document.getElementById("editor").style.height = "120px";
  </script>
</body>

</html>