Bir metin alanını nasıl ACE editörü yaparım?

Bir sayfadaki belirli metin alanlarını ACE editörleri olacak şekilde dönüştürebilmek istiyorum.

Herhangi bir işaret eden var mı lütfen?

DÜZENLE:

Editör.html dosyası bir metin alanıyla çalışıyor, ancak bir saniye ekler eklemez, ikincisi bir düzenleyiciye dönüştürülmüyor.

DÜZENLEME 2:

Birkaç tanesine sahip olma fikrini bir kenara atmaya ve bunun yerine yeni bir pencerede birini açmaya karar verdim. Yeni durumum, metin alanını gizlediğimde () ve gösterdiğimde () ekranın ters gitmesidir. Herhangi bir fikir?

Ace fikrini anladığım kadarıyla, bir metin alanını kendisi bir Ace editörü yapmamalısın . Ek bir div oluşturmalı ve bunun yerine .getSession () işlevini kullanarak metin alanını güncellemelisiniz .

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

ya da sadece ara

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

yalnızca formu verilen metin alanıyla gönderdiğinizde. Bunun Ace'i kullanmanın doğru yolu olup olmadığından emin değilim, ancak GitHub'da bu şekilde kullanılıyor .

Duncanansmart'ın github sayfasında oldukça harika bir çözümü var. progressive-ace , sayfanıza bir ACE editörübasit bir yolunu gösteriyor.

Temel olarak <textarea>, data-editorözniteliğe sahip tüm öğeleri alırız ve her birini bir ACE düzenleyicisine dönüştürürüz. Örnek ayrıca, beğeninize göre özelleştirmeniz gereken bazı özellikleri ayarlar datave cilt payını gösterme ve gizleme gibi öğe başına özellikleri ayarlamak için öznitelikleri nasıl kullanabileceğinizi gösterir 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>

Birden fazla As Editörünüz olabilir. Her metin alanına bir ID verin ve her iki IDS için de aşağıdaki gibi bir Ace Editor oluşturun:

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

Bir düzenleyici oluşturmak için şunu yapın:

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

Açıkça konumlandırılmalı ve boyutlandırılmalıdır. Show () ve hide () ile jQuery işlevlerine atıfta bulunduğunuza inanıyorum. Tam olarak nasıl yaptıklarından emin değilim, ancak DOM'da kapladığı alanı değiştiremez. Şunu kullanarak gizlerim ve gösteririm:

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

'Display' css özelliğini kullanırsanız çalışmayacaktır.

Temaların, modların vb. Nasıl ekleneceğini öğrenmek için buradaki wiki'ye göz atın ... https://github.com/ajaxorg/ace/wiki/Embedding---API

Not: Metin alanları olmak zorunda değiller, istediğiniz herhangi bir öğe olabilirler.

Benim gibi, CDN'den Ace kullanmanın minimal, çalışan bir örneğini isteyen herkes için:

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