Как сделать текстовую область редактором ACE? - PullRequest
Новая
       30

Как сделать текстовую область редактором ACE?

85 голосов
/ 22 июня 2011

Я бы хотел иметь возможность конвертировать определенные текстовые поля на странице в редакторы ACE.

У кого-нибудь есть указатели, пожалуйста?

EDIT:

У меня есть файл editor.html, работающий с одной текстовой областью, но как только я добавляю секунду, вторая не преобразуется в редактор.

РЕДАКТИРОВАТЬ 2:

Я решил отказаться от идеи иметь несколько, и вместо этого открыть один в новом окне. Мое новое затруднение заключается в том, что когда я скрываю () и показываю () текстовую область, отображение искажается. Есть идеи?

Ответы [ 5 ]

149 голосов
/ 02 ноября 2011

Насколько я понял идею Ace, вы не должны делать textarea самим редактором Ace.Вы должны создать дополнительный div и обновить текстовое поле, используя вместо этого функцию .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 .

25 голосов
/ 22 октября 2013

У 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>
8 голосов
/ 29 июля 2011

Вы можете иметь несколько редакторов Ace.Просто дайте каждому текстовому идентификатору 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>
0 голосов
/ 20 апреля 2019

Для любого, как я, который был перенаправлен на эту страницу и просто хочет минимально копируемый рабочий пример использования Ace с использованием библиотеки из CDN: 

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="editor">function(){}</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 = "300px";
    </script>
  </body>
</html>

Выход: enter image description here

0 голосов
/ 20 сентября 2011

Чтобы создать редактор, просто выполните:

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

Примечание: они не обязательно должны быть текстовыми, они могут быть любым элементом, который вы хотите.

...