Vditor 마크다운 에디터 V3.0.12 > 그누보드5 플러그인

그누보드5 플러그인

그누보드는 다양한 기능을 추가하기 쉽습니다.

Vditor 마크다운 에디터 V3.0.12 정보

Vditor 마크다운 에디터 V3.0.12

본문

버전 3.7.2 을 https://www.apachezone.com/member_pds/152 에 올려 놨습니다.

 

*** 기능개선에 대한 요청이 별로 없어서 파일을 지웁니다.  다음에 더 좋은 에디터로 돌아 오겠습니다. **

 

이전에 포인트 경매에 올렸었던 마크다운 에디터입니다. https://sir.kr/pauction/3496

 

최신 그누보드 5.4는 https://docker.apachezone.com/blog/116

 

아미나, 나리야 (https://muzia.net/sheet/185) 에서도 잘 동작됩니다.  (악보데모)

 

기본적인 테스트는 http://74.208.27.41/  에서 해 보시면 됩니다.

 

세가지 모드에 대한 선택은

 

마크다운에서 지원되는 기능은 http://74.208.27.41/render.html

 

첨부 파일안에

 

plugin에 들어가는 에디터 파일과

 

theme안에 basic 보드 스킨에 샘플로 적용되어 있으니,  쉽게 기존의 보드에 적용이 가능합니다.

 

보다 자세한 기능 참조는 https://github.com/jakekwak/vditor-sv2/blob/sv2/README_ko_KR.md

 

5.3버전도 파일을 보시고 적용하시면 될것 같습니다.

 

레이지 로딩 지원 데모 (스크롤 하면서 이미지가 로딩 됩니다.)

세개의 파일이 loading 파일로 있다가 스크롤 하면서 이미지 파일로 변경되는 것을 볼 수 있습니다.

(로컬에서 테스트라서 금방 파일을 읽어와서 이렇게 보여드립니다.)

 

++++++++++++++++++++++++++++++++

설치 내용 추가입니다.  나리야 기준

1. plugin 아래 있는 파일을 plugin아래로 copy합니다.

 

2. theme/basic-md/head.sub.php 안에 있는


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

를 theme/NB-Basic/head.sub.php 에  같은 위치쯤으로 카피합니다.

 

3. skin/board/NB-Basic/view.skin.php에서


            <div class="view-content">
                <?php echo get_view_thumbnail(na_view($view)); // 글내용 출력 ?>
            </div>


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

 

그리고 아래의 스크립트를 추가해 줍니다.


<!-- } 게시판 읽기 끝 -->
 
<script>
Vditor.preview(document.getElementById('bo_v_con'),
    document.getElementById('markdownText').textContent, {
        markdown: {
            toc: true,
        },
        lang: 'ko_KR',
        hljs: {
            style: 'native',
        },
        className: 'preview vditor-reset',
        customEmoji: emojiOptions,
    })
</script>

 

게시판별로 에디터 설정은 게시판 플러그인을 설치하셔서 게시판별 스킨설정에서 Vditor3으로 선택하시면 됩니다.

추천
11

댓글 전체

@우성짱 나리야에 적용할 수 있게 만들어서 올렸습니다
나리야 자체와 에디터에 있는 기능과 많이 겹쳐 보이네요.
(모두 언체크로 해 봤습니다.)

그리고 emoji사용할려면 utf8mb4로 세팅하셔야 됩니다.  :thumbsup:
나리야 기능은 사용 못합니다.  대부분의 기능이 더 편하게 에디터에 내장되어 있다고 보시면 됩니다.

fontawesome은 issue에 걸어 놨고..

맵이 문제네요..  구글맵은 api키를 받아야 처리가 될테고,  나리야를 조금 더 분석해 봐야겠습니다.
editorOptions.js 162번째 줄부터 http로 되어 있어서 https 홈페이지에서 mixed contents 콘솔 경고가 나오네요 ㅎㅎ 링크 주소만  http에서 https로 바꿔주면 될 것 같습니다.
헉.. 다음 CDN에서 받아오는 카카오톡 이모티콘 용량 다 합치니 30MB 넘네요 ㄷㄷㄷ

그래서 로딩 속도가 오래걸렸군요.

이모티콘 창을 눌렀을 때 다운받게 하게 셋팅하면 부담이 덜할 듯 합니다.
https://aced.ga/free/nb-basic-%ED%85%8C%EB%A7%88-%EC%88%98%EC%A0%95%EC%97%86%EB%8A%94-vditor3-%EC%9E%91%EC%97%85-%EB%82%B4%EC%9A%A9%EC%9E%85%EB%8B%88%EB%8B%A4/

위 내용처럼 코드가 나오는게 있고 안나오는게 있는데 어떻게 해야할까요 ㅠㅠ
아마 중간에 </textarea>가 들어가 있어서...
그 이후 버전에서 div로 변경하는 것으로 수정했는데  이 버전은 업데이트가 아직 안되어 있습니다. view.skin,php에서 div contenteditable로 변경해야 됩니다.
그냥 최신버전을 다운로드해서 dist에 넣으셔도 됩니다. (그리고 데모에 있는 것을 보고 수정 필요함.)
그냥 최신버전 다운로드해서 dist에 넣으면 되는거죠?

따로 수정하는건 무슨 말인지 모르겠습니다 ㅠㅠ

view.skin,php에서 div contenteditable로 변경

이건 뭐를 어떻게 변경하는건지 ㅠㅠ


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


이거를


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


이렇게 바꾸는건가요?
하두 오래되서
$view['content']의 값을 javascript로 직접 넘겨서 거기서 렌더링을 해서

div안의 id값과 매칭되는 곳에 넣어주는 식으로 되어야 됩니다.

<div id="markdownText" class="preview"></div>

멀티라인(텍스트에리어)를 지원했던 것이 div contenteditable 과 textarea였던 것 같은데,  아마 둘다 에러가 난것 같습니다.
html안에 html 코드가 들어가니 당연히 빡치기 나는 것이죠..

그래서 데모에서와 같이 External 파일식으로 만들었습니다.
데모> render>entity를 눌러 보시면 문제가 되는 것들이 제대로 표시가 됩니다.
참고로 네스트도 됩니다.
즉 인용구 안에 코드블락과 목록을 넣을 수 있습니다.
자주 쓰는 것이 인용구안에 순서있는 목록 그안에 코드블락으로 설명을 넣을 수 있습니다.

목록에서 번호가 안나오게 하는 방법은 "ctrl+enter"로..
Vditor 참 좋은데,  아무도 알아 주는 사람이 없어서.. ㅎㅎ

약간의 버그는 있지만,  에디터 관련된 것은 개발자가 하루만에 고쳐 주었는데

요즘은 일주일씩 걸려서 재미가 없네요.  3.0오픈했을 때, 테스트부탁도 하고,
관심이 있었던(포경 신청하신분)에게 다 보내드렸는데도 별로여서..

그래서 최근에 나온 3.3버전은 그누보드에 적용도 안했습니다.
요새는 개발자가 관심이 없나봐요 ㅠㅠ

3.3 버전도 포팅하면 좋을 것 같은데 ㅠㅠ

아무래도 에디터는 보수적으로 선택하는 경향이 있는 것 같습니다. ㅠㅠ
https://aced.ga/free/%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4-%EA%B8%B0%EB%8A%A5-%ED%85%8C%EC%8A%A4%ED%8A%B8/

다른건 잘 나오는데 마인드맵이 안나오네요. 왜그럴까요?
https://gnu.hubs.tk/bbs/board.php?bo_table=free&wr_id=2

그누 완전 순정에 같이 올려주신 basic-md 테마와 basic-md 보드스킨을 적용했습니다.

그런데 댓글에는 출력되는 스크립트 관련 부분이 본문 코드 출력시 사라져버립니다.

한번 체크해주세요!

test01/test01

입니다.
아 이것은 다른 문제 입니다. 그누보드에서 write.php에서 html태그를 제거합니다.

그래서 요청했던 https://github.com/gnuboard/gnuboard5/issues/56

write.php에서 html_purifier를 잠깐 지워보세요.
https://aced.ga/notice/vditor-%EA%B2%8C%EC%8B%9C%ED%8C%90%EC%97%90%EB%A7%8C-%EC%A0%81%EC%9A%A9-%EB%B0%A9%EB%B2%95%EC%9E%85%EB%8B%88%EB%8B%A4/

나리야에서는 잘 나오거든요.

혹시 나리야에서 뭔가 힌트를 얻을 수 있지 않을까요?
@우성짱 나리야가 그래도 완전히 달라서.  예전 기억으로는 원본에 markdown wr_option을 추가하다가
php가 꼬여서 그냥 놔 두었습니다.  PHP잘 하시는 분이 해야지 하면서..

한번 지워보세요. 한숨 더 자야 될지도 몰라서. ㅎㅎ
php를 아시면 그누보드에 pull request를 ..

1. wr_option은 호환성도 떨어지는 set type을 썼을까요?
2. 일반 Text 모드를 추가하면, secret 모드는 Text모드를 어떻게 조합해야될지..
@우성짱 참고 Vditor는 자체로 나쁜 html 제거하는 기능이 추가 되었습니다. 아마도..
alert 같은 것은 지워지는 옵션을 만들었던 기억이
html purifier를 건드려봐도 안나오네요..

아마 vditor 자체적으로 지우는 것 같습니다.

나리야와 그누보드 순정에서는 안나오는데...


```
<link rel="stylesheet" href="<?php echo G5_EDITOR_URL; ?>/vditor3/dist/index.css">
<script src="<?php echo G5_EDITOR_URL; ?>/vditor3/dist/index.min.js"></script>
<script src="<?php echo G5_EDITOR_URL; ?>/vditor3/editorOptions.js"></script>
```


위 내용은 나리야와 그누보드 순정에서 그냥 없어져버립니다.


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


위 내용은 textarea id 부분이 사라집니다.

마젠토님 환경에서는 정상적으로 vditor에서 출력이 될까요?

저는 도저히 정상적으로 나오지 않네요 ㅠㅠ

<script>
Vditor.preview(document.getElementById('bo_v_con'),
    document.getElementById('markdownText').textContent, {
        markdown: {
			toc: true,
            sanitize: false,
        },
        lang: 'ko_KR',
        hljs: {
            style: 'native',
        },
        className: 'preview vditor-reset',
        customEmoji: emojiOptions,
    })
</script>


이렇게 말이죠? 아무런 영향을 주지 못하네요 ㅠㅠ
https://apachezone.com/free/3732

아파치님 홈페이지에서는 정상적으로 출력되는군요.

아무래도 나리야 같은 구조로 출력되는 듯 하네요..

아마 코드블럭의 내용물은 htmlpurifier 하지 않는걸루...
htmlpurifier를 관리자는 pass하도록 설정했더니...


<link rel="stylesheet" href="<?php echo G5_EDITOR_URL; ?>/vditor3/dist/index.css">
<script src="<?php echo G5_EDITOR_URL; ?>/vditor3/dist/index.min.js"></script>
<script src="<?php echo G5_EDITOR_URL; ?>/vditor3/editorOptions.js"></script>


위 코드들이 그냥 실제로 실행되어 버리는군요 -_-;;;;;
시간내서 새버전을 적용해 봐야겠네요.

에디터로 해결 안되는 문제가

1. 그누보드와 안맞는 문제
2. 아이폰에서 composition event안나오는 문제
3. 새로운 SV 모드가 풀 마크다운 스펙을 완전히 지원되기까지가 시간이 걸림.

에디터 자체 업그레이드
1. GFM 스펙은 아니지만 필요한 기능 추가 필요
2. 글꼴, 컬러, 백그라운드, 라인 높이등
3. 폰트어썸 작업: 이슈했는데 답이 없어서 현재 이것 작업중입니다.
그누보드와 자체적으로 안맞는 문제... 코드블록쪽만 해결되면 일단 큰 문제는 넘어갈 듯 합니다.

아이폰 문제는... 저도 모르겠습니다.

나머지는... 도움이 안되겠지만 일단 테스트는 열심히 해볼게요!

감사합니다.
혹시 처음 글쓰기 열었을때 마크다운 모드로 바로 표시되게 할 수 있을까요?

옵션값을 어디에 넣어야될지 모르겠습니다.

아마도 editorOptions.js 파일일 것 같은데요. 감사합니다.
아.. editor.lib.php에 41번째 줄이 해당옵션이네요!


$html .= "cache: { enable: false },\n";
$html .= "debugger: false,\n";
$html .= "counter: 32768,\n";
$html .= "height: 500,\n";
$html .= "mode: 'sv',\n";
$html .= "lang: 'ko_KR',\n";
// lute.js 를 읽어 오는 곳..
$html .= "cdn: '".$editor_url."',\n";
$html .= "typewriterMode: true,\n";
$html .= "placeholder: '디폴트가 Typora 스타일 위지위그 에디터입니다. 메뉴에서 원하는 스타일로 변경가능합니다.',\n";
$html .= "tab: '\t',\n";
$html .= "preview:{ markdown: { toc: true, }, hljs: { style: 'native', }, },\n";

$html .= "  hint: {
    emojiPath: '".$editor_url."/dist/images/emoji',
    emojiTail: '<a href=\"https://gist.github.com/rxaviers/7360908\" target=\"_blank\">Github Emoji</a>',
    emoji: emojiOptions,
},\n";


여기 만질 수 있는 것들이 많네요! 감사합니다.
코드 부분만 단독으로 htmlpurifier 우회하는 방법을 찾았습니다.

https://sir.kr/qa/370328

이제 유일한 문제는


```
<textarea>
    <div>test</div>
</textarea>
```


위 부분만 해결되면 완벽할 것 같습니다!
나리야와 구조가 같기 때문에 똑같이 적용하시면 됩니다.

저는 나리야 게시판에만 적용했는데 잘 작동하더라구요.

아마 아미나에서도 잘 작동할 것입니다.

https://aced.ga/notice/vditor-%EB%82%98%EB%A6%AC%EC%95%BC%EB%B9%8C%EB%8D%94-%EA%B2%8C%EC%8B%9C%ED%8C%90%EC%97%90%EB%A7%8C-%EC%A0%81%EC%9A%A9-%EB%B0%A9%EB%B2%95%EC%9E%85%EB%8B%88%EB%8B%A4/

여기 참조하시고요.

나리야와의 차이점은


<div class="view-content">
	<?php echo get_view_thumbnail($view['content']); ?>
</div>


아미나에서는 view.skin.php에 위와 같은 내용이 있는데


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


위와 같이 바꾸면 됩니다.

나머지는 위 링크 참조하시면 될 것 같습니다.

write.head.skin.php가 없으면 그냥 write.skin.php에 넣으면 됩니다.
https://sir.kr/g5_tip/14022

위 팁으로 모든 부분이 완벽하게 해결되었습니다.

htmlpurifier를 수정할 필요도 없구요.

그누보드 코어를 몇군데 수정해야되는데 그 부분만 다음 업데이트때 처리된다면 완전 편하게 쓸 수도 있을 것 같습니다.

https://aced.ga/free/vditor-%EB%AA%A8%EB%93%A0-%EA%B8%B0%EB%8A%A5-%ED%85%8C%EC%8A%A4%ED%8A%B8/

그누보드 5.4 에 나리야빌더에서 적용해보았습니다.

마크다운으로 표현할 수 있는 부분과 악보 차트 마인드맵 등 좋은 기능이 정말 많습니다.
@우성짱 이미지 클릭시  원본이미지가 나오는것은 view.skin.php에서 get_view_thumbsnail 라이브러리를 get_view_thumbsnail_md라는 것을 별도로 만들어야 가능할 것 같습니다.  (그누보드 처럼 썸네일 만들고 보여지는 것은)

개발자 앱사이트 처럼 하는 것도 그누보드에서 처리해야 되네요. 각각의 img태그에 이벤트를 걸고 이벤트 발생하면 이미지 보여주는 div를 만들어서 html에 끼어넣고, 등 등 등... 
(html, php, css, javascript세개를 모두다 알아야.. ㅠㅠ

(아까 글을 쓴 것 같은데..  없어졌네요..)
이미지 클릭시 크게 보여주는 것은 힘든 일입니다. (자바스크립트, CSS 등등)

하지만 그누보드 원본에 이미 팝업으로 원본을 보여주는 기능이 있습니다.

https://demo.sir.kr/gnuboard5/gallery/%E3%85%87%E3%84%B4%E3%84%B9%E3%84%B4%E3%84%B9/

위 링크에 가서 이미지를 클릭하면 이미 링크가 걸려있기 때문에 클릭하면 원본으로 볼 수 있는 것입니다.

이 기능만 연결하면 될 것 같습니다.

썸네일은 라이브러리가 하나 필요하군요!
https://medium-zoom.francoischalifour.com/

혹시나 이미지 줌을 생각하신다면

위 링크가 최고의 선택으로 보입니다.

lightbox도 좋고 css로 그런 효과를 만드는 것도 좋지만

미디움 줌처럼 완벽하게 작동하는 것은 보지 못했습니다.
음.. 그누보드 순정에서 게시판 관리에 들어가면 콘솔에 에러가 뜹니다.

그래서 게시판 상단 내용, 하단 내용에 내용을 추가하면 실제로 추가가 되지 않네요.

한번 체크해주세요.

그누보드가 업그레이드가 되면 메인 에디터는 그냥 스마트에디터로 넣고, 게시판 에디터만 vditor로 적용하는 것이 좋을 것 같습니다.
@우성짱 댓글이 길어서 그런지 글을 썼는데 없어지네요.  사진 관련을 결론은 그누보드에서 수정을 해야 된다는 것입니다. 아마도 그 수정부분이 get_view_thumbnail 라이브러이고,

php를 잘몰라서 그누보드의 수정은 각자가 알아서 하시는 것으로.
https://github.com/Vanessa219/vditor/issues/677

이슈에 올렸더니 마일스톤에 있는 것 같습니다.

그런데 지워진 것 같기도하고 .. 안할건지 할건지 모르겠네요.
https://sir.kr/qa/371049

혹시 위처럼 이미지 저장까지 기존 서버에 저장하고,

마지막 출력 URL을 임의의 도메인으로 넣을 수 있을까요?

DB를 보니 다행히 이미지 주소가 상대주소로 되어있더라구요.

그누보드 기본은 절대주소인데.. 그건 정말 좋은 것 같습니다.

아무튼 본론으로 들어가면


https://example.com/data/editor/2008/3535239587_1596254846.2555.png  - 원본 이미지 주소

https://cdn.example.com/data/editor/2008/3535239587_1596254846.2555.png - 출력되는 이미지 주소


이렇게 출력되면 CDN 서버를 직접 구축해서 운영할 수 있거든요.

이미지 캐시 서버를 따로 운영하는 효과가 생깁니다.

https://blog.lael.be/post/7605

위와 같이 작업하려고 하는데, 마지막 이미지 주소 출력 부분을 임의의 도메인으로 지정할 수 있을까요?


 upload.php 53번째 줄


$file_name = sprintf('%u', ip2long($_SERVER['REMOTE_ADDR'])) . '_' . get_microtime() . "." . $filename_ext;
$save_dir = sprintf('%s/%s', $data_dir, $file_name);
$save_url = sprintf('%s/%s', $data_url, $file_name);

@move_uploaded_file($tmp_name, $save_dir);

// $json[$i] = array( $name => $save_url);
$data->$name = $save_url;


윗 부분인거 같은데요. 어떻게 바꾸면 원하는 도메인으로 넣을 수 있을까요?

이게 성공하면 이미지 캐시서버 구축에 대한 글을 적어보려고 합니다.
1. wr_option 부분이 hook으로 바꿀 수 있는데 어떻게 하는걸까요?

적용 가이드를 수정하려고 합니다.

2. 가이드대로 작성해보니


내용~~~~
엔터<br><br/>
엔터<br><br/>
내용2~~~~


위와 같이 내용 사이에 엔터로 공간을 만들면 br이 다 날아가버리네요.

내용 사이에 공간을 주려면 어떻게 하는게 좋을까요?


엔터나 스페이스 두번으로 한줄은 띄워집니다.

하지만 2줄은 안띄워지네요.

원래 그런걸까요?
마크다운은 원래 그렇네요.

더 넣고 싶으면 </br> 넣으면 되네요.

그런데 br은 한줄이 아닌 두줄씩 띄워지네요.

br을 넣는 만큼 *2 만큼 줄바꿈이 이루어지네요.

공식 데모에서도 br을 넣으니 2줄 줄바꿈이 되네요
https://post.naver.com/viewer/postView.nhn?volumeNo=24627214&memberNo=42458017
마크다운 문법을 아시면 아주 쓰기 편하지만,  일반 위지위그에 익숙한 사람은 불편할 수도 있습니다.

마크다운 문법을 아시면 마우스나 커서키 없이 타이핑하시면 됩니다.
(타이포라 모드사용해서..)
와이프가 쓰기에는 어렵긴하겠네요..
아! 그런데요 안에들어가있는 이모티콘은 그냥 사용해도되는거죠??

카톡이모티콘도 있고 너무 깔끔해서 쓰고는 싶은데
와이프한테 텍스트정렬만 나한테말해주면 html소스로 수정해준다 해야겠어요 ㅋ
editor.lib.php 안에 필요한 것만 넣으세요. 

참조: https://github.com/Vanessa219/vditor/blob/master/demo/index.js

 toolbar = [
    'emoji',
    'headings',
    'bold',
    'italic',
    'strike',
]
해당 파일에 여러군데 넣어보고 테스트 해봤는데 잘안되네요..

너무 기초적인 문제를 물어본거같아 죄송합니다..^^;

어디쯤에 넣어야되는걸까요.. 문법을 제가 잘 몰라서요..
그 부분이 PHP와 javascript와 섞여 있어서 문법이 조금만 틀려도 동작을 안합니다.

https://github.com/Vanessa219/vditor/blob/master/demo/index.js#L56 를 찾아서

거기에 같은 방식으로 넣어 보세요.
$html .= "toolbar=['heading', 'bold',]",
전체 503
그누보드5 플러그인 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT