Как сделать textarea редактором ACE?
Я хотел бы иметь возможность конвертировать определенные текстовые области на странице в Редакторы ACE.
У кого-нибудь есть какие-нибудь советы, пожалуйста?
EDIT:
У меня есть редактор.html-файл работает с одним textarea, но как только я добавляю второй, второй не преобразуется в Редактор.
EDIT 2:
Я решил отказаться от идеи с несколькими, и вместо того, чтобы открыть в новом окне. Мое новое затруднение в том, что когда я прячусь () и показываю() текстовое поле, дисплей идет наперекосяк. Есть идеи?
4 ответов
насколько я понял идею туза, вы не должны делать 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());
только при отправке формы с заданным textarea. Я не уверен, что это правильный способ использовать 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. Просто дайте каждому textarea идентификатор и создайте редактор Ace для обоих идентификаторов так:
<style>
#editor, #editor2 {
position: absolute;
width: 600px;
height: 400px;
}
</style>
<div style="position:relative; height: 450px; " >
<div id="editor">some text</div>
</div>
<div style="position:relative; height: 450px; " >
<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, они могут быть любой элемент, который вы хотите.