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키를 받아야 처리가 될테고, 나리야를 조금 더 분석해 봐야겠습니다.
그래서 로딩 속도가 오래걸렸군요.
이모티콘 창을 눌렀을 때 다운받게 하게 셋팅하면 부담이 덜할 듯 합니다.
위 내용처럼 코드가 나오는게 있고 안나오는게 있는데 어떻게 해야할까요 ㅠㅠ
그 이후 버전에서 div로 변경하는 것으로 수정했는데 이 버전은 업데이트가 아직 안되어 있습니다. view.skin,php에서 div contenteditable로 변경해야 됩니다.
그냥 최신버전을 다운로드해서 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를 눌러 보시면 문제가 되는 것들이 제대로 표시가 됩니다.
code.hljs.php가 붙으면 출력이 잘 됩니다.
즉 인용구 안에 코드블락과 목록을 넣을 수 있습니다.
자주 쓰는 것이 인용구안에 순서있는 목록 그안에 코드블락으로 설명을 넣을 수 있습니다.
목록에서 번호가 안나오게 하는 방법은 "ctrl+enter"로..
약간의 버그는 있지만, 에디터 관련된 것은 개발자가 하루만에 고쳐 주었는데
요즘은 일주일씩 걸려서 재미가 없네요. 3.0오픈했을 때, 테스트부탁도 하고,
관심이 있었던(포경 신청하신분)에게 다 보내드렸는데도 별로여서..
그래서 최근에 나온 3.3버전은 그누보드에 적용도 안했습니다.
3.3 버전도 포팅하면 좋을 것 같은데 ㅠㅠ
아무래도 에디터는 보수적으로 선택하는 경향이 있는 것 같습니다. ㅠㅠ
궁금하네요 ㅎㅎ 이미지 첨부 기능도 다 되면 짱인데요?
휴가내고 항소 준비중인데
장리해서 따로 아미나에 글을 쓸까 했었어요
다른건 잘 나오는데 마인드맵이 안나오네요. 왜그럴까요?
댓글 부분은 더 공부해야 될 것 같습니다. ㅎㅎ
댓글 부분 표시가 되면 짱 좋을 것 같은데요.
이 부분은 정말 어렵군요.
그누 완전 순정에 같이 올려주신 basic-md 테마와 basic-md 보드스킨을 적용했습니다.
그런데 댓글에는 출력되는 스크립트 관련 부분이 본문 코드 출력시 사라져버립니다.
한번 체크해주세요!
test01/test01
입니다.
그래서 요청했던 https://github.com/gnuboard/gnuboard5/issues/56
write.php에서 html_purifier를 잠깐 지워보세요.
나리야에서는 잘 나오거든요.
혹시 나리야에서 뭔가 힌트를 얻을 수 있지 않을까요?
php가 꼬여서 그냥 놔 두었습니다. PHP잘 하시는 분이 해야지 하면서..
한번 지워보세요. 한숨 더 자야 될지도 몰라서. ㅎㅎ
푹 쉬시고 작업하세용 ㅎㅎ
병나면 안됩니다. ㅎㅎ
힘내라 힘 ! 힘내라 힘!
html_purifier제거해 보세요
1. wr_option은 호환성도 떨어지는 set type을 썼을까요?
2. 일반 Text 모드를 추가하면, secret 모드는 Text모드를 어떻게 조합해야될지..
일단 htmlpurifier 도전 중입니다.
alert 같은 것은 지워지는 옵션을 만들었던 기억이
아마 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에서 출력이 될까요?
저는 도저히 정상적으로 나오지 않네요 ㅠㅠ
markdown: {
sanitize: false,
},
를 추가해보세요
<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>
이렇게 말이죠? 아무런 영향을 주지 못하네요 ㅠㅠ
htmlpurifier 문제 맞네요. ㅎㅎ
다 날리니깐 정상적으로 출력되네요...
이것을 어떻게 해결해야할지 ㅠㅠ
에디터도 2개지원해 주고..
좀더 발전적으로 갔으면 좋겠습니다.
한계가 크네요 ㅠㅠ
아파치님 홈페이지에서는 정상적으로 출력되는군요.
아무래도 나리야 같은 구조로 출력되는 듯 하네요..
아마 코드블럭의 내용물은 htmlpurifier 하지 않는걸루...
<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 파일일 것 같은데요. 감사합니다.
editorOptions.js 에는 형식이 다르고
view.skin.php는 그냥 뷰스킨이구요.
write.skin.php에 들어가야될 것 같습니다.
어떤식으로 넣으면 될까요?
$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";
여기 만질 수 있는 것들이 많네요! 감사합니다.
https://sir.kr/qa/370328
이제 유일한 문제는
```
<textarea>
<div>test</div>
</textarea>
```
위 부분만 해결되면 완벽할 것 같습니다!
5.3아미나에 적용할수 있을까요?
적용가능하다면 방법좀 알려주세요..ㅠ
저는 나리야 게시판에만 적용했는데 잘 작동하더라구요.
아마 아미나에서도 잘 작동할 것입니다.
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에 넣으면 됩니다.
위 팁으로 모든 부분이 완벽하게 해결되었습니다.
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 에 나리야빌더에서 적용해보았습니다.
마크다운으로 표현할 수 있는 부분과 악보 차트 마인드맵 등 좋은 기능이 정말 많습니다.
개발자 앱사이트 처럼 하는 것도 그누보드에서 처리해야 되네요. 각각의 img태그에 이벤트를 걸고 이벤트 발생하면 이미지 보여주는 div를 만들어서 html에 끼어넣고, 등 등 등...
(html, php, css, javascript세개를 모두다 알아야.. ㅠㅠ
(아까 글을 쓴 것 같은데.. 없어졌네요..)
하지만 그누보드 원본에 이미 팝업으로 원본을 보여주는 기능이 있습니다.
https://demo.sir.kr/gnuboard5/gallery/%E3%85%87%E3%84%B4%E3%84%B9%E3%84%B4%E3%84%B9/
위 링크에 가서 이미지를 클릭하면 이미 링크가 걸려있기 때문에 클릭하면 원본으로 볼 수 있는 것입니다.
이 기능만 연결하면 될 것 같습니다.
썸네일은 라이브러리가 하나 필요하군요!
혹시나 이미지 줌을 생각하신다면
위 링크가 최고의 선택으로 보입니다.
lightbox도 좋고 css로 그런 효과를 만드는 것도 좋지만
미디움 줌처럼 완벽하게 작동하는 것은 보지 못했습니다.
그래서 게시판 상단 내용, 하단 내용에 내용을 추가하면 실제로 추가가 되지 않네요.
한번 체크해주세요.
그누보드가 업그레이드가 되면 메인 에디터는 그냥 스마트에디터로 넣고, 게시판 에디터만 vditor로 적용하는 것이 좋을 것 같습니다.
php를 잘몰라서 그누보드의 수정은 각자가 알아서 하시는 것으로.
get_view_thumbnail이 그누보드 게시판별로 에디터 지정 가능하면 해결될까요?
이슈에 올렸더니 마일스톤에 있는 것 같습니다.
그런데 지워진 것 같기도하고 .. 안할건지 할건지 모르겠네요.
혹시 위처럼 이미지 저장까지 기존 서버에 저장하고,
마지막 출력 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;
윗 부분인거 같은데요. 어떻게 바꾸면 원하는 도메인으로 넣을 수 있을까요?
이게 성공하면 이미지 캐시서버 구축에 대한 글을 적어보려고 합니다.
정규식이 답인 것 같습니다
표현을 어디에서 바꿔줘야 할까요?
적용 가이드를 수정하려고 합니다.
2. 가이드대로 작성해보니
내용~~~~
엔터<br><br/>
엔터<br><br/>
내용2~~~~
위와 같이 내용 사이에 엔터로 공간을 만들면 br이 다 날아가버리네요.
내용 사이에 공간을 주려면 어떻게 하는게 좋을까요?
엔터나 스페이스 두번으로 한줄은 띄워집니다.
하지만 2줄은 안띄워지네요.
원래 그런걸까요?
더 넣고 싶으면 </br> 넣으면 되네요.
그런데 br은 한줄이 아닌 두줄씩 띄워지네요.
br을 넣는 만큼 *2 만큼 줄바꿈이 이루어지네요.
공식 데모에서도 br을 넣으니 2줄 줄바꿈이 되네요
br이라도 써야겠네요.
텍스트 정렬기능은 따로 없는걸까요 ..?
(왼쪽, 가운데, 오른쪽 정렬)
텍스트 정렬을 다들 잘 안쓰나보네요
와이프가 왜없냐 해서요 ㅋㅋ
마크다운 문법을 아시면 아주 쓰기 편하지만, 일반 위지위그에 익숙한 사람은 불편할 수도 있습니다.
마크다운 문법을 아시면 마우스나 커서키 없이 타이핑하시면 됩니다.
(타이포라 모드사용해서..)
아! 그런데요 안에들어가있는 이모티콘은 그냥 사용해도되는거죠??
카톡이모티콘도 있고 너무 깔끔해서 쓰고는 싶은데
와이프한테 텍스트정렬만 나한테말해주면 html소스로 수정해준다 해야겠어요 ㅋ
툴바 부분에 필요없는거는 빼려고 하는데요 어떤 파일을 수정해야될지를 못찾아서요
참조: https://github.com/Vanessa219/vditor/blob/master/demo/index.js
toolbar = [
'emoji',
'headings',
'bold',
'italic',
'strike',
]
너무 기초적인 문제를 물어본거같아 죄송합니다..^^;
어디쯤에 넣어야되는걸까요.. 문법을 제가 잘 몰라서요..
https://github.com/Vanessa219/vditor/blob/master/demo/index.js#L56 를 찾아서
거기에 같은 방식으로 넣어 보세요.
$html .= "toolbar=['heading', 'bold',]",
출근해서 개발자 분들한테 조언좀 구해봐야겠어요 ^^
답글 감사합니다!!