테스트 사이트 - 개발 중인 베타 버전입니다

mvmEditor 0.1

화면 캡처 2021-02-14 003726.png

monaco-editor, higlightjs, markedjs, purifyjs, turndownjs를 활용한 마크다운 에디터입니다.

 

여러가지 오픈소스를 조합해 만들었으며 마크다운에 익숙한 개발자, vscode에 익숙한 개발자라면 사용하기 가장 편할것으로 생각됩니다.

 

모나코에디터는 vscode의 기반이 된 에디터이며, vscode에서 사용하는 멀티커서, 단축키, 코드하이라이트 기능 등을 그대로 활용할 수 있습니다.

 

코드하이라이트 작성을 vscode처럼 자동완성으로 도와주고, ctrl+k+f로 탭 및 정렬이 vscode처럼 지원되기때문에 코드하이라이트 작성이 무척이나 편할것으로 생각됩니다.

 

그누보드 용은 첨부된 파일을 받아주시고, 그 외에 곳에서 사용하려면 깃헙을 참고하세요.

 

https://github.com/ohah/mvmEditor

 

3667491413_1613230474.411.png

3667491413_1613230488.5628.png

 

html로 변경되기에 굳이 뷰어는 필요 없으나 코드하이라이트 기능을 사용한다면 view.skin.php 페이지에서 별도의 하이라이트 기능을 사용하시려면 아래의 데모코드를 참고하여 수정하세요

 

[code]

//코드 하이라이트 사용시

<?php

$editor_url = G5_EDITOR_URL.'/'.$config['cf_editor'];

    add_stylesheet('<link rel="stylesheet" href="'.$editor_url.'/css/github-markdown.css">', 0);

    add_stylesheet('<link rel="stylesheet" href="'.$editor_url.'/css/hljs.default.min.css"', 0);

    add_javascript('<script src="'.$editor_url.'/js/highlight.min.js"></script>',0);

    add_javascript('<script src="'.$editor_url.'/js/mvmEditor.js"></script>',0);

    ?>

    <script>

        const viewer = new mvmEditorViewer('#bo_v_atc',{

            ele : "#bo_v_atc"

        });

 

    </script>

    <section id="bo_v_atc" class="markdown-body">

[/code]

 

[code]

//코드하이라이트 미사용시
$editor_url = G5_EDITOR_URL.'/'.$config['cf_editor'];

add_stylesheet('<link rel="stylesheet" href="'.$editor_url.'/css/github-markdown.css">', 0);
<section id="bo_v_atc" class="markdown-body">

[/code]

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 6개

감사합니다. 깃헙 링크는 에러가 나네요
복귀해서 테스트한번 해봐야겠네요.
감사합니다.
감사합니다
테스트로 해봤는데 문제가 있더군요.. 다른거 찾아봐야겠어요

게시글 목록

번호 제목
13856
13852
13828
13786
13777
13774
13773
13766
13758
13748
13738
13736