vditor 나리야빌더 게시판에만 적용 방법입니다.

나리야 테마는 순정으로 놔두고 NB-basic만 바꾸는 작업을 했습니다.

https://sir.kr/g5_tip/14022

먼저 위와 같이 그누보드 원본을 수정합니다.

### /skin/board/NB-Basic/view.skin.php 수정

대략 10번째 줄에

add_stylesheet('<link rel="stylesheet" href="/plugin/editor/vditor3/dist/index.css">', 1);
add_javascript('<script src="/plugin/editor/vditor3/dist/index.min.js"></script>', 1);
add_javascript('<script src="/plugin/editor/vditor3/editorOptions.js"></script>', 1);

위 내용 추가

---

대략 180번째 줄에

<?php echo get_view_thumbnail(na_view($view)); // 글내용 출력 ?>

위 내용을

<textarea id="markdownText" class="preview" style="display:none;"><?php echo get_view_thumbnail($view['content']);?></textarea>

위 내용으로 변경

---

대략 430번째 줄에 있는

<!-- } 게시판 읽기 끝 -->

밑에

<script>
Vditor.preview(document.getElementById('bo_v_con'),
    document.getElementById('markdownText').textContent, {
        markdown: {
            toc: true,
        },
        lang: 'ko_KR',
        hljs: {
            style: 'monokai', //코드 스타일 테마 지정 가능
        },
        className: 'preview vditor-reset',
        customEmoji: emojiOptions,
        lazyLoadImage: 'https://cdn.jsdelivr.net/npm/vditor/dist/images/img-loading.svg',  // lazyloading 기능

    })
</script>

위 내용 추가

---

### /skin/board/NB-Basic/write.skin.php 수정

5번째 줄

add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css" media="screen">', 0);

바로 밑에

add_stylesheet('<link rel="stylesheet" href="/plugin/editor/vditor3/dist/index.css">', 0);
add_javascript('<script src="/plugin/editor/vditor3/dist/index.min.js"></script>', 0);
add_javascript('<script src="/plugin/editor/vditor3/editorOptions.js"></script>', 0);

위 내용 추가

---

상세 내용은 `관련 링크`를 참조하세요!

상당히 좋네요!