모나코 에디터를 티스토리 에디터로 사용하기 -2-

이제는 실사용 단계.

모나코 에디터를 마크다운 에디터로 포팅하는 작업은 오래걸릴 듯 오래걸리지 않아 생각보다 빠르게 작업되었고, 이미지 업로드의 경우도 직접 만든 에디터다보니 커스텀하거나 함수를 추가하는게 쉬워 그리 오래 걸리지 않았다.

코드하이라이트는 적용되어있고, 차트까지 처리하면 되는데 tui editor에 넣었던 chartjs는 넣지 않고 apexchart만 넣을 에정이다.

에디터 작성쪽에서는 어느정도 구현되었으나 실제로 보여지는 스크립트 단계처리부분이 핵심이다.

기존 코드로 돌아갈수는 있게 대충 때려 박았는데 될지 안될지 모른다. 어설프게 개발을 하면서 느낀건데. 실행이 될거라 생각하고 빌드하면 안되서 문제, 또 안될거라 생각하고 혹시나 하며 빌드 했는데 되서 문제인게 바로 개발이다.

이미지 업로드 테스트이며

차트 테스트

이번엔 차트 테스트이다.

{
    "chart": {
        "type": "line"
    },
    "series": [
        {
            "name": "sales",
            "data": [
                30,
                40,
                35,
                50,
                49,
                60,
                70,
                91,
                125
            ]
        }
    ],
    "xaxis": {
        "categories": [
            1991,
            1992,
            1993,
            1994,
            1995,
            1996,
            1997,
            1998,
            1999
        ]
    }
}

ㅁㄴㅇㄹ

코드 하이라이트 테스트

.mvm-image-upload{display:none;}
.mvm-button::after{clear: both;content:'';display:table;}
.mvm-popup-button{margin:10px 0;cursor:pointer;padding:5px 10px; border:1px solid #dbdbdb;background: royalblue;color:white;border-radius: 5px;font-size:0.95rem}
.mvm-button{margin:10px 0;float:right;cursor:pointer;padding:5px 10px; border:1px solid #dbdbdb;background: royalblue;color:white;border-radius: 5px;font-size:0.95rem}
.mvm-fullscreen{position:fixed;top:0;left:0;height:100%;width:100%;z-index: 9999;background:#fff}
.mvm-chartWrapper{height:300px;width:100%;} 
.mvm-tableWrapper{height:300px;width:100%;}
.mvm-tableWrapper .mvm-chart-table{border-collapse: collapse;}
.mvm-tableWrapper .mvm-chart-table td{border:1px solid #dbdbdb;height:25px;width:120px;}

.mvm-chartWrapper::after{clear: both;display:table;content: '';}
.mvm-chartArea, .mvm-chartPreview{float:left;width:50%;position: relative;height:100%;}