추천 수 3 댓글 6
Extra Form
자료 소개 라이믹스용 마크다운 편집기 새버전입니다.
설치 경로 ./modules/editor/skins/rhymix_markdown_editor
테스트 환경 Rhymix 2.0
라이선스 GPL v2
Github https://github.com/seainthebottle/rhymix-markdown-editor
원작 정보 https://github.com/rzglitch/rx-editor-markdown
이름 버전 날짜 다운수
rhymix-markdown-editor-2.0.1.zip 2.0.1 2022-10-12 20
rhymix-markdown-editor-2.0.0.zip 2.0.0 2022-10-12 15

지난번에 올려드린 마크다운 에디터를 수정한 버전을 새로 올립니다.

 

지난 마크다운 에디터의 최대 단점이 단순 Textarea를 사용하였기에 하이라이팅이 불가능하고 편집기능에 제약이 많다는 점이었는데요, 이를 해결하고자 CodeMirror V6를 도입하였습니다. 그래서 아래와 같은 형태의 하이라이팅이 구현되었습니다.

rmde.png.jpg

 

이전 버전과 마찬가지로 Rhymix V2 환경하에서 개발하여 XE나 Rhymix 과거 버전에서 동작 여부는 확인해 보지 못했습니다.

 

설치는 이번 버전과 같이 첨부된 zip 파일 modules 이하 폴더를 rhymix 메인 디렉토리에 푸시면 됩니다.

 

이번 버전에서는 마크다운 일부 세팅을 외부에서 변경할 수 있습니다. 게시판 기본설정의 게시판 상단내용 설정에 다음 내용을 추가해 주시면 됩니다.

<script>
EditorSettings = {
  html: true, // HTML tag 사용가능 여부
  breaks: false, // 마크다운에서 줄바꿈이 되면 자동으로 HTML에도 <br>을 넣어줄 지 여부 
  linkify: true, // 내용에 URL이 들어있으면 그 URL을 실제 링크시켜 줄 지 여부
};
</script>

 

 

이번 버전도 에디터를 스크롤하면 프리뷰가 이에 맞추어 스크롤됩니다. 하지만, 그 반대로 프리뷰 스크롤에 맞추어 에디터가 스크롤되지는 않습니다. 참고로 이번 버전도 Alt+`를 누르시면 프리뷰를 토글해서 사용하실 수 있습니다.

 

 

개인적으로 MathJax와 Markdown을 이용하고자 만든 모듈이라 MathJax에 대한 배려가 상당히 되어 있습니다.

MathJax를 쓰시고자 하는 분을 위해 게시판 기본설정의 게시판 상단내용 설정에 적용한 저의 설정을 올리면 다음과 같습니다.

('$'와 '$$'가 inlineMath, displayMath에 들어가 있지 않아 의아하실 수 있는데, PanDoc의 spec을 맞추다 보니 여러 문제로 내부적으로 처리하여 설정에 빠져 있습니다. 실제로는 '$'와 '$$'도 MathJax의 escape로 사용가능합니다.)

 

<script>
MathJax = {
  tex: {
    tags: 'ams',
    inlineMath: [ ["\\(", "\\)"]],
    displayMath: [ ["\\[","\\]"] ],
    processEscapes: true
  }, 
  svg: {
    fontCache: 'global'
  },
  startup: {
    elements: ['.xe_content']
  }
};
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" defer src="https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-chtml.js"></script>

 

 

이전 버전에서는 CSS를 수정하는 것으로 전반적인 레이아웃 수정이 가능하였습니다만, 이번에는 CodeMirror V6를 사용하게 되면서 CodeMirror가 들어간 에디터는 불가피하게 CodeMirror의 방식을 쓰게 되었습니다. 쓰면서 적어도 에디터 색상 정도는 맞추어야 하기 때문에 개별적 customization이 필요할 것으로 생각됩니다. 이를 위해서는 다음과 같은 다소 복잡한 절차를 거쳐야 합니다. (추후 보다 쉽게 할 수 있도록 개선할 생각입니다.)

1. modules/editor/skins/rhymix-markdown-editor/themes에 들어있는 테마 파일들을 참고하여 새로운 테마를 만듭니다.

2. modules/editor/skins/rhymix-markdown-editor/editor.html에 다음과 같이 추가해 새로운 테마를 로드합니다.

<load target="themes/(새로운 테마파일명)" />

3. 이렇게 로드한 테마 파일은 게시판 기본설정의 게시판 상단내용 설정에 다음과 같이 추가하여 적용할 수 있습니다.

<script>
EditorSettings = {
  darkTheme: "customDarkTheme", // 'customDarkTheme'라는 객체명(파일명 아님)을 가진 다크 테마를 로드합니다.
  lightTheme: "customLightTheme" // 'customLightTheme'라는 객체명(파일명 아님)을 가진 라이트 테마를 로드합니다.
};
</script>

 

customDarkTheme, customLightTheme를 기본으로 로드하도록 하였으므로 코드를 잘 참고하시면 크게 어렵지 않게 수정할 수 있으리라 생각합니다.

 

 

버전정보

 

2.0.1

- 스킨에 따라 내용 저장이 안되는 버그 수정

 

2.0.0

- 에디터에 CodeMirror V6 적용

 

1.0.9

- 스크롤 방식 개선

- MathJax escaping 방식 개선

- markdown-it-deflist 모듈 추가

 

1.0.8

- 그림 삽입 시 바로 그림이 나오지 않는 버그 수정

- MathJax에서 수식을 입력할 때 수식이 깨지거나 스크롤이 맞지 않는 버그 수정

 

1.0.7

- 첫 배포본

 

 

 

 

 

  • ?

    eondcom 님과 연락하여 2.0.0의 버그를 수정하여 2.0.1로 재배포 했습니다. 버그 리포트 감사드립니다.

  • profile
    일반 게시판에 적용하려 해봤는데
    적용한뒤 게시판 쓰기 저장을 누르면 '내용 값은 필수입니다'라고 뜨네요;;
  • profile ?

    아 나름 테스트를 해보고 올렸는데 문제가 있나 보네요. 확인해보고 가급적 빨리 수정해 보겠습니다. 그런데, 혹시 본문 내용을 비운 채 쓰기를 누르셔서 그런 건 아닌지 확인 부탁드립니다. (본문을 비우고 쓰려고 하면 rhymix가 막는지 이런 메시지가 뜨는 걸 본 것 같습니다.)

  • profile ?
    번거로우시겠지만 혹시 사용 환경 (php 버전, rhymix 버전, 기타 특이사항 등)을 간단하게나마 알려주실 수 있으신지요? 바로 여러가지 시도를 해 봤는데, 제 환경에서는 에러가 재현이 되지 않아서 수정에 어려움이 있습니다.
  • profile
    xe wiki 모듈에 적용해보려 했더니,
    라이믹스 마크다운 에디터로 설정해서 저장해도 새로고침하면 다시 다른 에디터로 돌아가버리네요. 흑..
  • profile ?

    제가 바로 확인은 쉽지 않을 것 같지만 시간되는대로 xe wiki에 적용해서 문제가 없는지 확인해 보겠습니다. 그런데, xe wiki가 뭔가요? 검색하면 나오겠죠? 제가 전문개발자가 아니라 필요에 의해 찾아보며 검색하며 만들다보니 잘 모르는 것이 많습니다.