ACE 에디터에서 가치를 얻으려면 어떻게 해야 합니까?

ACE 에디터에서 가치를 얻으려면 어떻게 해야 합니까?

사용중입니다ACE처음으로 편집자를 맡았습니다.저는 그것과 관련된 아래의 질문이 있습니다.

1. 다음의 예를 어떻게 찾을 수 있습니까?ACE그 페이지의 편집자?편집자 인스턴스를 유지할 글로벌 변수를 유지하고 싶지 않습니다.요청에 따라 인스턴스를 찾아야 합니다.

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

나는 보다 더 나은 편집자를 위한 제안을 받을 수 있습니다.ACE거의 모든 종류의 언어/markup/css 등을 지원하고 고도로 통합된 편집자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");

제 경험으로 볼 때 에이스는 제가 본 코드 편집기 중 최고입니다.CodeMirror 등 다른 것들은 거의 없지만 Ace에 비해 활용도가 낮거나 통합이 어렵다는 것을 알게 되었습니다.

다음은 그러한 편집자들의 비교를 위한 위키 페이지입니다.

제가 시도해보지 않은 유료도 있습니다(그리고 지금은 기억이 나지 않습니다).제가 찾을 수 있다면 나중에 업데이트할 것입니다.

편집기의 내용을 저장하기 위해 숨겨진 입력을 바로 앞에 두고 편집기를 이렇게 초기화했습니다.

    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의 태그에 에이스 편집기를 초기화했다고 가정해 보겠습니다. EX:<div id="MyAceEditor">this the editor place holder</div>.

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

첫 번째 단계는 아래와 같이 편집자의 인스턴스를 찾는 것입니다.

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

ace Editor에서 값을 가져오려면 다음과 같이 getValue() 메서드를 사용합니다.

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

값을 에이스 편집기로 설정하려면(일부 코드를 편집기에 푸시하려면),setValue()방법은 아래와 같습니다.

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

이에 대응하여 아래의 간단한 추가 줄:

onChange={(값) => handleAceText(값)}

import React from 'react';
import ReactAce from 'react-ace-editor';

const CodeEditor = ({ handleAceText, aceRef }) => {
  return (
    <ReactAce
      mode='html'
      theme='eclipse'
      setReadOnly={false}
      onChange={(value) => handleAceText(value)}
      style={{ height: '300px' }}
      ref={aceRef}
    />
  );
};

export default CodeEditor;

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

그러면 현재 편집기 개체가 반환됩니다.

var code = editor.getValue();

이렇게 하면 편집기 내의 텍스트가 반환됩니다.

다음 코드를 사용하여 에이스 에디터의 가치를 얻으십시오. html은

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

그리고나서

<script >
 var some = $('#aceEditor');

 some.keyup(function() {
  var code = editor.getSession().getValue();
  $.ajax({
       type: "POST",
       url: "{% url 'creatd-new' %}",
       data: {'code':code},
       success: function (data) {
           console.log("foo");
       }
     });
     }
      </script>

load 이벤트에 리스너를 추가하면 다음과 같은 인스턴스가 나타납니다.

onLoad={(editor) => {
    this.sourceEditor=editor;
}}

나중에 조작할 수 있을 겁니다

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