Làm cách nào để biến một textarea thành một trình soạn thảo ACE?

Tôi muốn có thể chuyển đổi các textareas cụ thể trên một trang thành ACE biên tập viên.

Có ai có bất kỳ chỉ dẫn xin vui lòng?

BIÊN TẬP:

Tôi có tệp editor.html hoạt động với một vùng văn bản, nhưng ngay sau khi tôi thêm một giây, tệp thứ hai sẽ không được chuyển đổi thành một trình chỉnh sửa.

CHỈNH SỬA 2:

Tôi quyết định loại bỏ ý tưởng có một số và thay vào đó mở một trong một cửa sổ mới. Khó khăn mới của tôi là khi tôi ẩn () và hiển thị () vùng văn bản, màn hình bị lỗi. Bất kỳ ý tưởng?

Theo như tôi hiểu ý tưởng về Ace, bạn không nên biến một textarea thành một trình soạn thảo Ace. Thay vào đó, bạn nên tạo một div bổ sung và cập nhật textarea bằng cách sử dụng hàm .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());
});

hoặc chỉ cần gọi

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

chỉ khi bạn gửi biểu mẫu với vùng văn bản nhất định. Tôi không chắc liệu đây có phải là cách phù hợp để sử dụng Ace hay không, nhưng đó là cách nó được sử dụng trên GitHub .

Duncansmart có một giải pháp khá tuyệt vời trên trang github của mình, progressive-ace , giải pháp này thể hiện một cách đơn giản để kết nối trình chỉnh sửa ACE với trang của bạn.

Về cơ bản, chúng tôi lấy tất cả các <textarea>phần tử có data-editorthuộc tính và chuyển đổi mỗi phần tử thành một trình chỉnh sửa ACE. Ví dụ này cũng đặt một số thuộc tính mà bạn nên tùy chỉnh theo ý thích của mình và trình bày cách bạn có thể sử dụng datacác thuộc tính để đặt thuộc tính cho mỗi phần tử như hiển thị và ẩn máng xối 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>

Bạn có thể có nhiều Biên tập viên Ace. Chỉ cần cung cấp cho mỗi vùng văn bản một ID và tạo Ace Editor cho cả hai IDS như sau:

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

Để tạo một trình chỉnh sửa chỉ cần làm:

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

Chúng phải được định vị và kích thước rõ ràng. Bằng show () và hide (), tôi tin rằng bạn đang đề cập đến các hàm jQuery. Tôi không chắc chính xác cách họ thực hiện, nhưng nó không thể sửa đổi không gian mà nó chiếm trong DOM. Tôi ẩn và hiển thị bằng cách sử dụng:

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

Nếu bạn sử dụng thuộc tính css 'display', nó sẽ không hoạt động.

Xem wiki ở đây để biết cách thêm chủ đề, chế độ, v.v. ... https://github.com/ajaxorg/ace/wiki/Embedding---API

Lưu ý: chúng không nhất thiết phải là textareas, chúng có thể là bất kỳ phần tử nào bạn muốn.

Đối với bất kỳ ai như tôi chỉ muốn một ví dụ tối thiểu, hiệu quả về việc sử dụng Ace từ 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>