코드 미러 사용방법

코드 미러 이거 하나 땜에 진짜 빡돈줄 알았다 ㅋㅋㅋ

이게 이렇게 간단한줄 몰랐다..

vuejs 소스만 보이고.. 일반적인방법은 보이지 않아서.. 어쨌든 어렵사리 알아냈다.

일단 cdn으로 세팅은 먼저 해놓고

사용법은 아래 소스처럼 하면됨

var textarea = document.getElementById('modal_edit');
var editor = CodeMirror.fromTextArea(textarea, {
   lineNumbers: true,
   lineWrapping: true,
   styleActiveLine: true,
   autoCloseTags: true,
   scrollbarStyle: "null",
   mode: "text/html",
   theme: "eclipse",
   matchBrackets: true,
   matchTags: {bothTags: true},
   extraKeys: {
       "Ctrl-Space": "autocomplete"
   }
});

위에 먼저 이게 존재 해야한다. 이것은 먼저 텍스트박스를 코드미러로 만들어 놓은 소스이다.

$(document).on('show.bs.modal','#editModal', function () {
    let skin = $(this).find('[name=skin_selected]').val();
    $.ajax({
        type : "post",
        url : admin_url+"/theme/skin_selected",
        data: {csrf_token_name:$("meta[name=X-CSRF-TOKEN]").attr('content'),skin:skin},
        context:this,
        dataType:"html",
        success : function(response){
            editor.setValue(response);
            $('#modal_edit').val(editor.getValue());
        }
    });
});

이건 제이쿼리 아작스에 넣은방법이다. 위에 editer를 전역변수로 해놓고 받아와서 아작스에 데이터를 텍스트박스에 매칭시키는 기능..

$(document).on('click','#modal_save', function () {
    editor.save();
    $.ajax({
        url: admin_url+"/theme/skin_save",
        type: "POST",
        data: {
            csrf_token_name:$("meta[name=X-CSRF-TOKEN]").attr('content'),
            content:editor.getValue(),
            skin:$('[name=skin_selected]').val()
        },
        dataType: 'json',
        success: function(response){
            if(response.status === 200) {
                window.location.reload();
            }
        }
    });
    return false;
});

이거는 폼 서브밋하게되면 데이터를 아작스 통해서 저장되고 리프레시로 동작한다.

(원래는 spa면 리프레시가 아니라 일일히 매칭하는 작업까지 해야한데.. 귀찮아서 이렇게 해놓았다.

여기서 백단은 php로 작업했고 fopen 함수관련된걸로 해결 했다.

이 완료된 작업 들은 블로그 제작쪽에 참고하면 된다.

코드 미러 사용방법 #

코드 미러 사용방법