플러그인 [다운 x]마크다운 에디터
본문
**새롭게 하나의 파일로 올렸습니다.**
포인트는 4000점입니다. (매일 출석부, 매일 한글 하시면 15일후에 4000점 됩니다. 15일 개근 1000점, 출석부 100*15, 로그인 50*15, 글쓰기 50*15)
드디어 어느정도 쓸만한 버전이 되어서 공개를 합니다. (5.4에서 테스트 했지만 5.3도 동작될 것 같습니다.)
* 아미나 최신 버전에도 잘 동작합니다.(1.8.23)
다양한 마크다운 에디터가 있지만, 우연히 발견하게 된 중국 커뮤니티의 마크다운 에디터입니다.
(현재 사용되고 있는 마크다운 엔진도 이분들이 만든것입니다. https://github.com/b3log/lute 속도 때문에 이전에 사용하던
markdown-it https://github.com/markdown-it/markdown-it 를 교체한 것입니다.)
https://github.com/b3log/vditor
기능은
1. 악보 (https://github.com/paulrosen/abcjs)
2. 차트 (https://github.com/apache/incubator-echarts)
3. UML (https://github.com/knsv/mermaid)
4. 수식 (https://github.com/KaTeX/KaTeX)
5. 그외에 GFM (github.com 과 같은) 스펙 https://github.github.com/gfm/
CommonMark https://commonmark.org/
6. 커스텀 이모티콘 (라이센스 문제가 있을 것 같아서 코드에서 뺍니다. 쉽게 넣을 수 있습니다.)
방식은 마크다운에디터 > 텍스트로 DB에 저장 > Viewer에서 다시 마크다운으로 컨버전하는 형태입니다.
그래서 첨부 파일을 풀어서 plugin/editor/vditor과. theme/basic-md 로 카피하시고.. 그냥 덮어씌우세요.
head.sub.php에서 index.classic.css나 index.dark.css 중 하나를 선택하세요
관리자에서 테마설정을 basic-md로 하고..
게시판을 (테마)basic-md 로 하시고 dhtml 에디터 사용을 체크해 주시면 됩니다.
현재 wr_options에는 html1, html2, mail, secret만 지원이 되고 윗단에서 처리를 못하니. (wr_options에 markdown 이나 text 옵션이 있으면 좋을 것 같습니다.)
안되는 옵션은 <웹사이트주소> 입니다. HTML태그인줄 알고 지우는 것 같습니다.
대신에 [웹사이트 주소](웹사이트 주소)를 쓰시면 됩니다.
그리고 카카오톡 이모티콘은 emojiOptions.js에 넣으시면 됩니다.
간단하게 코드 설명입니다.
write.skin,php는 editor를 불러와서 넣어줍니다. 모든 코드는가 editor 디렉토리안에 있는 것은 다른 에디터와 같습니다.
그런데 마크다운은 WYSIWYG가 아니라서 $content가 텍스트로 저장됩니다.
이것을 불러올때 (view.skin.php)에서 잽싸게 컨버전을 해야 됩니다.
그래서 아래처럼 관련 js와 css를 head.sub.php에 넣어주고
head.sub.php
[code]
<link rel="stylesheet" href="<?php echo G5_EDITOR_URL ?>/vditor/vditor/dist/index.classic.css">
<link rel="stylesheet" href="<?php echo G5_EDITOR_URL ?>/vditor/vditor/dist/index.dark.css">
<script src="<?php echo G5_EDITOR_URL ?>/vditor/vditor/dist/index.min.js"></script>
<script src="<?php echo G5_EDITOR_URL ?>/vditor/editorOptions.js"></script>
[/code]
아래와 같이 텍스트를 마크다운으로 변경시켜주는 JS를 추가해 준것 입니다.
view.skin.php
[code]
<script>
Vditor.preview(document.getElementById('bo_v_con'), {
customEmoji : emojiOptions,
})
</script>
[/code]
추가로 필요한 기능은
1. 일반 에디터처럼 getHTML()기능 필요: 이것은 연말쯤 되면(2.0) WYSIWYG가 나올때까지 기다려 보기로
2. 다른 블로그 처럼 앞의 내용 조금 보여주는 기능 (다른 쪽은 별도로 summary 같은 Field로 처리)
3. 냑 테마중 블로그용이 몇개 있던데.. 이것도 적용된 블로그가 나오면 좋을 것 같습니다.
4. TOC라고 마크다운의 헤딩 부분만 별도로 보여주는 기능이 있는데.. 이 기능은 그누보드를 잘 아시는 분이
5. atjs기능
Keyboard shortcuts
editor
@Username auto-complete
:Emoticon auto-completion
ctrl e/ ⌘ e common emoticons
ctrl h/ ⌘ h headline cue
ctrl b/ ⌘ b bold
ctrl i/ ⌘ i italic
ctrl s/de- ⌘ s serial
ctrl shift d/ ⌘ ⇧ d split line
ctrl ./ ⌘ . reference
ctrl l/ ⌘ l unordered list
ctrl o/ ⌘ o ordered list
ctrl j/ ⌘ j task list
ctrl u/ ⌘ uco de block
ctrl g/ ⌘ g inline code
ctrl z/ ⌘ z undo
ctrl y/ ⌘ y restore
ctrl k/ ⌘ k link
ctrl m/ ⌘ m Table
ctrl p/ ⌘ p Preview Edit Mode Switch
ctrl '/ ⌘ ' Full Screen Edit Mode Switch
ctrl enter/ ⌘ enter Submit
ctrl shift d/ ⌘ ⇧ d Copy Current Line or Selected Content
ctrl Backspace/ ⌘ Backspace Delete Cursor Line or Selected Line
댓글목록 34
선구자님의 댓글의 댓글
선구자
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
아이피
(116.♡.♡.11)
작성일
네네 보내주시면 감사합니다^^
https://computist.me/mb_basic/write
여기에 설치했어요~
abcjs가 미리보기랑 실제 글쓴글 보기에서
악보가 잘 표현되지 않네요
위 주소에서 테스트한다음
https://muzia.net
에 적용하려고요
거듭 감사드립니다~
웹지기님의 댓글
용량 수정 했습니다. 재업로드 해보세요.