TinyMCE 에디터 적용하기

TinyMCE 홈페이지 > Quick start

https://www.tiny.cloud/docs/quick-start/

샘플코드

<textarea id="note" class="note">내용을 입력하세요</textarea>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
     selector: '#note',
     plugins: 'print preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link media mediaembed template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker imagetools textpattern noneditable help formatpainter permanentpen pageembed charmap tinycomments mentions quickbars linkchecker emoticons advtable',
     menu: {
         tc: {
             title: 'TinyComments',
             items: 'addcomment showcomments deleteallconversations'
         }
     },
     menubar: 'file edit view insert format tools table tc help',
     toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist checklist | forecolor backcolor casechange permanentpen formatpainter removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media pageembed template link anchor codesample | showcomments addcomment',
     autosave_ask_before_unload: true,
     toolbar_mode: 'floating',
     tinycomments_mode: 'embedded',
     tinycomments_author: 'Author name',
     height: '100%'
 });
</script>

API Key

API 키는 My Account에서 가입후 발급이 가능
발급후 도메인을 등록하고 no-api-key 부분을 교체해서 사용이 가능