IT TIP

ACE 편집기에서 가치를 얻으려면 어떻게해야합니까?

itqueen 2020. 12. 6. 22:30
반응형

ACE 편집기에서 가치를 얻으려면 어떻게해야합니까?


내가 사용하고 ACE처음으로 편집기를. 이와 관련된 아래 질문이 있습니다.

  1. ACE페이지 에서 편집기 의 인스턴스를 어떻게 찾 습니까? 에디터 인스턴스를 유지할 전역 변수를 유지하고 싶지 않습니다. 요청시 인스턴스를 찾아야합니다.

  2. 그 가치를 얻고 설정하는 방법?

ACE거의 모든 유형의 언어 / 마크 업 / css 등을 지원하고 .NET과 고도로 통합되는 편집기보다 더 나은 편집기에 대한 제안을 기다리고 jQuery있습니다.


자신의 당 API :

마크 업 :

<div id="aceEditor" style="height: 500px; width: 500px">some text</div>

인스턴스 찾기 :

var editor = ace.edit("aceEditor");

값 가져 오기 / 설정 :

var code = editor.getValue();

editor.setValue("new code here");

내 경험에 비추어 볼 때 Ace는 내가 본 최고의 코드 편집기입니다. CodeMirror 등과 같은 다른 제품은 거의 없지만 Ace보다 통합하기가 덜 유용하거나 어렵습니다.

여기에 그러한 편집자들의 비교를위한 Wiki 페이지가 있습니다.

내가 시도하지 않은 유료도 있습니다 (지금은 기억할 수 없습니다). 찾을 수 있으면 나중에 업데이트됩니다.


편집기의 내용을 저장하기 위해 바로 앞에 숨겨진 입력을 배치하고 다음과 같이 편집기를 초기화했습니다.

    var $editor = $('#editor');
    if ($editor.length > 0) {
        var editor = ace.edit('editor');
        editor.session.setMode("ace/mode/css");
        $editor.closest('form').submit(function() {
            var code = editor.getValue();
            $editor.prev('input[type=hidden]').val(code);                
        });
    }

내 양식이 제출되면 편집기 값을 가져와 숨겨진 입력에 복사합니다.


숨겨진 입력 으로이 문제를 해결합니다. :)

    <input type="hidden" name="komutdosyasi" style="display: none;">
    <script src="/lib/aceeditor/src-min/ace.js" type="text/javascript" charset="utf-8"></script>

<script>
    var editor = ace.edit('editor');
        editor.session.setMode("ace/mode/batchfile");
        editor.setTheme("ace/theme/monokai");

    var input = $('input[name="komutdosyasi"]');
        editor.getSession().on("change", function () {
        input.val(editor.getSession().getValue());
    });
</script>   

html의 태그에서 ace 편집기를 초기화했다고 가정 해 보겠습니다. 예 : <div id="MyAceEditor">this the editor place holder</div>.

자바 스크립트 섹션에서 ace.js를로드 한 후

첫 번째 단계는 아래와 같이 에디터의 인스턴스를 찾는 것입니다.

var editor = ace.edit("MyAceEditor");

ace 편집기에서 값을 얻으려면 아래와 같이 getValue () 메서드를 사용합니다.

var myCode = editor.getSession().getValue();

값을 ace 편집기로 설정하려면 (일부 코드를 편집기에 푸시하기 위해) setValue()아래와 같은 방법을 사용 합니다.

editor.getSession().setValue("write your code here");

var editor = AceEditor.getCurrentFileEditor("MyEditor");

This would return the current editor object

var code = editor.getValue();

This would return the text within the editor.

참고URL : https://stackoverflow.com/questions/8963855/how-do-i-get-value-from-ace-editor

반응형