Svelte - TinyMCE 사용하기, 주요 옵션들

TinyMCE는 Svelte에서 활용할 수 있는 가장 유용한 Editor중 하나이다.

실제 필자가 Svelte에서 사용할 만한 Editor를 비교한 글을 작성한 적이 있는데, 그중 당연히 제일 좋았던 기억이 난다.

기본 사용

먼저 가장 기본적으로 사용할 수 있는 코드는 아래와 같다.

먼저 npm을 이용해서 개발 의존성 모드로 tinymce-svelte 를 설치한다.

npm i -D tinymce-svelte

설치가 완료되면, App.svelte와 같이 tinymce-svelte를 사용하고자 하는 svelte 파일에 아래내용을 기입하면 기본적으로 동작할 준비가 완료된다.

<script>
import Editor from '@tinymce/tinymce-svelte';
let value = 'some content';
</script>

<main>
<h1> Hello Tiny</h1>
<div class="editor"><Editor apiKey="no-api-key"  bind:value={value}  /></div>
<textarea bind:value={value}></textarea>
</main>

<style>
.editor {
}
</style>

위 코드를 저장하고, 콘솔에 npm run dev를 실행해서 정상적으로 나오는지 확인해보자.

npm run dev

위와 같이 정상적으로 에디터를 사용할 상태가 된 것을 알 수 있다.

 

다만 아직 API를 받지 않아서 경고 메세지가 나타나게 된다.

API 키 설정

Tiny공식 홈페이지에 가보면, 무료 버전(Core 버전이 무료버전이다)으로도 충분히 사용할 수 있는 기능 제공하기 때문에 Free Account를 생성해서 등록하도록 하자.

버전별로의 차이점은 아래 링크에서 확인이 가능하므로 혹시 라이센스 구매가 필요하다면 미리 참고하면 좋겠다.

Features | The World's Most Advanced Rich Text Editor Full Feature List | TinyMCE

Blogger

가격정책을 아래에서 확인이 가능하다.

Pricing | WYSIWYG HTML Editor | TinyMCE

Blogger

유용한 conf 값

그럼 필자가 확인한 Core 기준으로 Svelte에서 가장 유용한 conf 값에 대해서 소개해 보도록 하겠다.

1. toolbar_sticky - 브라우저의 툴바를 화면에서 계속 나타날 수 있도록 해주는 옵션이다. 편집이 길어지는 경우 toolbar가 상단에서 멀어져 사용이 불편한 부분을 해소해준다.

메뉴바가 화면 상단에 계속 유지된다

 

2. image_caption - Image에 설명을 붙일 수 있는 기능이 추가된다.

이미지에 설명을 붙여줄 수 있다

3. autosave - 특정 시간을 기준으로 자동으로 저장을 지원한다. 브라우저 이상이나, 컴퓨터가 문제가 발생해서 저장하지 못했을 경우 유용하게 사용할 수 있다. 기본 옵션값은 아래와 같이 지정할 수 있다.

  ...
  autosave_ask_before_unload: true,
  autosave_interval: '30s',
  autosave_prefix: '{path}{query}-{id}-',
  autosave_restore_when_empty: false,
  autosave_retention: '2m'
  ...

 

• Plugins

plugins: 'preview searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons'

• Toolbar

toolbar: 'undo redo | bold italic underline strikethrough | fontfamily fontsize blocks | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen preview save print | insertfile image media link codesample'

위 옵션을 한번에 적용한 코드는 다음과 같다.

<script>
import Editor from '@tinymce/tinymce-svelte';
let value = 'some content';

const conf = {
plugins: 'preview searchreplace autolink autosave directionality code visualblocks visualchars fullscreen image link media template codesample table charmap pagebreak nonbreaking insertdatetime advlist lists wordcount help charmap quickbars emoticons',
toolbar: 'restoredraft undo redo | bold italic underline strikethrough | fontfamily fontsize blocks | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview print | image media link codesample',
toolbar_sticky: true,
image_caption: true,
autosave_ask_before_unload: true,
autosave_interval: '30s',
autosave_prefix: 'tinymce-autosave-{path}{query}-{id}-',
autosave_restore_when_empty: false,
autosave_retention: '2m',
quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
}
</script>

<main>
<h1> Hello Tiny</h1>
<div class="editor"><Editor apiKey="no-api-key"  bind:value={value}  {conf} /></div>
<textarea bind:value={value}></textarea>
</main>

<style>
.editor {
}
</style>

 

아래와 같이 적용된 화면을 확인할 수 있다.