ฉันจะสร้าง textarea เป็นโปรแกรมแก้ไข ACE ได้อย่างไร

ฉันต้องการแปลงพื้นที่ข้อความเฉพาะบนเพจให้เป็นบรรณาธิการ ACE

ใครมีคำแนะนำกรุณา?

แก้ไข:

ฉันมีไฟล์ editor.html ที่ใช้งานได้กับพื้นที่ข้อความเดียว แต่ทันทีที่ฉันเพิ่มไฟล์ที่สองไฟล์ที่สองจะไม่ถูกแปลงเป็นตัวแก้ไข

แก้ไข 2:

ฉันตัดสินใจที่จะทิ้งความคิดที่จะมีหลาย ๆ อันและเปิดขึ้นในหน้าต่างใหม่แทน สถานการณ์ใหม่ของฉันคือเมื่อฉันซ่อน () และแสดง () พื้นที่ข้อความการแสดงผลจะผิดปกติ ความคิดใด ๆ ?

เท่าที่ฉันเข้าใจความคิดของ Ace คุณไม่ควรสร้างtextareaเป็นตัวแก้ไข Ace เอง คุณควรสร้าง div เพิ่มเติมและอัปเดต textarea โดยใช้ฟังก์ชัน. getSession ()แทน

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

หรือโทร

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

เมื่อคุณส่งแบบฟอร์มพร้อมพื้นที่ข้อความที่กำหนดเท่านั้น ฉันไม่แน่ใจว่านี้เป็นวิธีการที่เหมาะสมที่จะใช้ Ace แต่มันคือวิธีที่มันถูกนำมาใช้บนGitHub

Duncansmart มีวิธีแก้ปัญหาที่ยอดเยี่ยมมากในหน้า github ของเขาโปรเกรสซีฟเอซซึ่งแสดงให้เห็นถึงวิธีง่ายๆในการเชื่อมต่อโปรแกรมแก้ไข ACE เข้ากับเพจของคุณ

โดยทั่วไปเราจะได้รับ<textarea>องค์ประกอบทั้งหมดที่มีdata-editorแอตทริบิวต์และแปลงแต่ละองค์ประกอบเป็นตัวแก้ไข ACE ตัวอย่างนี้ยังตั้งค่าคุณสมบัติบางอย่างที่คุณควรปรับแต่งตามความต้องการของคุณและแสดงให้เห็นว่าคุณสามารถใช้dataแอตทริบิวต์เพื่อตั้งค่าคุณสมบัติต่อองค์ประกอบเช่นการแสดงและซ่อนรางน้ำ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>

คุณสามารถมี Ace Editors ได้หลายคน เพียงแค่ให้แต่ละ textarea ID และสร้าง Ace Editor สำหรับทั้ง IDS ดังนี้:

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

ในการสร้างตัวแก้ไขให้ทำ:

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

ต้องอยู่ในตำแหน่งและขนาดที่ชัดเจน โดย show () และ hide () ฉันเชื่อว่าคุณกำลังอ้างถึงฟังก์ชัน jQuery ฉันไม่แน่ใจว่าพวกเขาทำอย่างไร แต่ไม่สามารถแก้ไขพื้นที่ที่ใช้ใน DOM ได้ ฉันซ่อนและแสดงโดยใช้:

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

หากคุณใช้คุณสมบัติ css 'display' มันจะไม่ทำงาน

ดูวิกิที่นี่สำหรับวิธีเพิ่มธีมโหมดและอื่น ๆ ... https://github.com/ajaxorg/ace/wiki/Embedding---API

หมายเหตุ: ไม่จำเป็นต้องเป็น textareas สามารถเป็นองค์ประกอบใดก็ได้ที่คุณต้องการ

สำหรับทุกคนเช่นฉันที่ต้องการเพียงตัวอย่างการใช้งานขั้นต่ำของการใช้ Ace จาก 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>