페이지의 특정 텍스트 영역을 ACE 편집자로 변환하고 싶습니다.
누구든지 포인터가 있습니까?
편집하다:
하나의 텍스트 영역에서 작동하는 editor.html 파일이 있지만 두 번째 텍스트를 추가하자마자 두 번째 파일이 편집기로 변환되지 않습니다.
편집 2 :
나는 여러 개를 갖는 아이디어를 폐기하고 대신 새 창에서 하나를 열기로 결정했습니다. 내 새로운 곤경은 텍스트 영역을 숨기고 () 표시 ()하면 표시가 잘못된다는 것입니다. 어떤 아이디어?
답변:
내가 Ace에 대한 아이디어를 이해하는 한, 텍스트 영역 을 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에서 사용되는 방법 입니다.
'SELECT 1OR&nbps;2;'에서 textarea에 넣습니다 . 누군가 내가 뭘 잘못하고 있는지 말해 줄 수 있습니까?
Duncansmart는 ACE 편집기를 페이지에 연결하는 간단한 방법을 보여주는 Progress-ace 라는 github 페이지에 매우 멋진 솔루션 을 제공합니다.
기본적으로 속성 이있는 모든 <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 편집기를 가질 수 있습니다. 각 텍스트 영역에 ID를 부여하고 다음과 같이 두 IDS에 대한 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
참고 : 텍스트 영역 일 필요는 없으며 원하는 요소가 될 수 있습니다.
ace.edit('code1')하면 다음과 같은 쓰레기가 발생합니다. <textarea class="ace_editor ace-twilight ace_focus"><div class="ace_gutter">...</textarea>즉, ace.edit는 텍스트 영역 내부에 자체를 채우려 고 시도하지만 이것은별로 좋지 않습니다.
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>