이번에, 새롭게 서비스( Chroco )의 개발을 하고 있고, Markdown 에디터의 "SimpleMDE "를 이용하려고 설정해 보았습니다만, CSS 프레임워크의 "Bulma"와 경합을 일으켜, 유효하지 않다. . .
"Font Awesome"버전으로 이상해지고 있다. . .

조사하고 있으면, 어때? 2016년부터 업데이트되지 않음,,,


과연 더 이상 버전 업되어 있지 않네요.
그러니까, 다른 모듈들과의 차분이 발생해, 잘 움직이지 않게 되고 있는군요. . .

그래서 새로운 대안의 "EasyMDE"을 발견했습니다.

EasyMDE란?

EasyMDE는 이하에도 기재가 있는 대로, SimpleMDE를 포크해 만들어진 후계기의 Markdown 에디터 같네요. 현재라도 조금 버젼 업은 계속되고 있는 것 같습니다.

This repository is a fork of SimpleMDE, made by Sparksuite .
Go to the dedicated section for more information.

EasyMDE 설치

npm 를 사용하는 경우

npm install easymde --save

UNPKG CDN을 사용하는 경우

<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>

사용법

편집기 로드

모듈을 설치하거나 가져온 후 EasyMDE를 첫 번째 TextArea에 로드합니다.

<textarea></textarea>
<script>
var easyMDE = new EasyMDE();
</script>

또는 Javascript를 사용하여 특정 TextArea를 선택할 수 있습니다.

<textarea id="my-text-area"></textarea>
<script>
var easyMDE = new EasyMDE({element: document.getElementById('my-text-area')});
</script>

jQuery의 경우

<textarea id="my-text-area"></textarea>
<script>
var easyMDE = new EasyMDE({element: $('#my-text-area')[0]});
</script>

요약

이번에는 간단한 설정 방법만 소개했지만 "EasyMDE"은 "SimpleMDE"의 기능을 그대로 사용할 수 있습니다. (그럼 포크 한 모듈이기 때문에)
그래서, 최신 환경에서 Markdown 에디터를 이용하는 경우는 이쪽을 이용하는 편이 추천이라고 생각합니다.

마지막이 됩니다만, 이번의 "EasyMDE"를 이용한 서비스의 CHROCO 는 이쪽이 됩니다.

포트폴리오를 스토리로 말하는 서비스를 만들었어. 2019년 12월 19일