codemirror 에디터

* 다운로드 release

https://codemirror.net/doc/releases.html

CodeMirror: Release History

* 공식 사이트 레퍼런스

https://codemirror.net/

CodeMirror

 

다양한 모드로 사용할 수 있지만, 개인적으로는 SQL 모드일 때가 가장 맘에 들었다.

 

js, css load

<%-- codemirror js --%>
<script src="/js/codemirror-5.53.2/lib/codemirror.js"></script>
<%-- codemirror sql.js addon --%>
<script src="/js/codemirror-5.53.2/mode/sql/sql.js"></script>
<%-- codemirror css --%>
<link rel="stylesheet" href="/js/codemirror-5.53.2/lib/codemirror.css">
<%-- codemirror theme --%>
<link rel="stylesheet" href="/js/codemirror-5.53.2/theme/darcula.css">

html

<div style="margin-left:100px;margin-top: 200px;width:800px;">
    * SQL
    <textarea id="batch_content" name="batch_content"></textarea>
    <button type="button" onclick="fn_msg()">확인</button>
</div>

사실 html은 다 필요없고.. 

<textarea id="batch_content" name="batch_content"></textarea>

얘만 있으면 된다..

 

script 작성

<script>
    // textarea 태그의 element를 지정
    var textarea = document.getElementById('batch_content');
    // 에디터 설정
    var editor = CodeMirror.fromTextArea(textarea, {
        lineNumbers: true,  //왼쪽 라인넘버 표기
        lineWrapping: true, //줄바꿈. 음.. break-word;
        theme: "darcula",   //테마는 맘에드는 걸로.
        mode: 'text/x-sql', //모드는 sql 모드
        val: textarea.value
    });

    function fn_msg() {
        // 에디터에 입력된 값은 아래와 같이 가져올 수 있다.
        var text = editor.getValue();
        alert(text);
    }

</script>

 

아래화면은 테스트를 한 화면.

 

깔끔하고 예쁘다!

 

이 codemirror 에디터를 이용하여 datagrip이나 sqldevloper처럼 DBMS를 관리할 수 있는 웹 DB툴을 만들어서 사용해보았으나, 그냥 datagrip을 쓰고 있습니다.