我希望能够将页面上特定的文本区域转换为ACE编辑器。
请问有什么建议吗?
编辑:
我已经让editor.html文件在一个文本区域上运作良好,但当我添加第二个文本区域时,第二个区域没有被转换为编辑器。
编辑2:
我决定放弃使用多个编辑器,而是在新窗口中打开一个编辑器。我的新问题是,当我隐藏()和展示()文本区域时,显示效果出现问题。有任何想法吗?
我希望能够将页面上特定的文本区域转换为ACE编辑器。
请问有什么建议吗?
编辑:
我已经让editor.html文件在一个文本区域上运作良好,但当我添加第二个文本区域时,第二个区域没有被转换为编辑器。
编辑2:
我决定放弃使用多个编辑器,而是在新窗口中打开一个编辑器。我的新问题是,当我隐藏()和展示()文本区域时,显示效果出现问题。有任何想法吗?
据我理解Ace的想法,你不应该将 textarea 作为Ace编辑器本身。你应该创建一个额外的div,并使用 .getSession() 函数更新textarea。
HTML
<textarea name="description"/>
<div id="description"/>
JavaScript
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上使用的方式。
'SELECT 1OR&nbps;2;'
放入文本区域。有人可以告诉我我做错了什么吗? - alexgluedata-editor
属性的<textarea>
元素,并将其转换为ACE编辑器。该示例还设置了一些您应根据自己喜好自定义的属性,并演示了如何使用data
属性来针对每个元素设置属性,例如使用data-gutter
显示和隐藏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>
<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');
ace.edit('code1')
,你会得到类似垃圾的东西:<textarea class="ace_editor ace-twilight ace_focus"><div class="ace_gutter">...</textarea>
换句话说,ace.edit 尝试将自己塞进文本区域,这样做不太好。 - Ciantic对于只想要使用CDN中的Ace来实现最小化、可工作示例的任何人:
<!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>