[JS] tinyMCE 적용하기

tinyMCE란 WYSIWYG(What You See Is What You Get) 텍스트 에디터이다.
"What You See Is What You Get"가 의미하는 것은 문서가 표시되는 형태로 편집이 가능하다는 것이다.
해당 라이브러리를 사용하면 블로그나 메일에서 글을 작성할 때, 글꼴이나 기울기와 같은 효과를 줄 수 있다.
아래 절차를 통해 라이브러리를 적용할 수 있다.
 

tinyMCE API 발급받기

tinyMCE를 사용하기 위해서는 먼저 API 키를 발급받아야 한다.
아래 페이지에 접속하여 로그인을 한다.

The Most Advanced WYSIWYG Editor | Trusted Rich Text Editor | TinyMCE

로그인을 하면 대시보드에 연결이 되는데 아래 이미지와 같이 "Get Your API Key" 버튼이 있다.
버튼이 연결된 위치로 이동하여 API 키를 확인할 수 있다.

 

코드 작성하기

이제 관련 코드를 작성해야 한다.
코드는 html과 javascript로 작성한다.

<textarea id="#Content" placeholder="글을 작성해 주세요."></textarea>

<script src="https://cdn.tiny.cloud/1/{발급 받은 API 키}/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
    tinymce.init({
        selector: '#Content'
    });
</script>

 
 
만약 작성 옵션을 조정하고 싶다면 init에 다른 속성을 사용하여 처리할 수 있다.