본문 바로가기
Python

Svelte - TinyMCE 기본 사용, conf 옵션 활용

by 올엠 2022. 5. 10.
반응형

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

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

 

Svelte - 쓸만한 OpenSource Editor 찾기 (asecurity.dev)

 

Svelte - 쓸만한 OpenSource Editor 찾기

2022년 기준으로 Svelte에서 사용해볼 만한 Editor가 어떤것이 있는지 확인한 내용들을 정리해 본다. 필자 기준으로 Editor를 사용할 때 글쓰는것은 대부분 WYSIWYG( 위지위그: What You See Is What You Get, "보.

asecurity.dev

최근 TinyMCE 관련해서 적용을 진행하면서 기본적인 사용 방법과 conf를 통해 유용했던 옵션 값에 대해서 간략하게 정리해보도록 하겠다.

 

기본 사용

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

먼저 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를 받지 않아서 경고 메세지가 나타나게 된다.

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

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

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

 

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

TinyMCE Full Feature List. The World's most advanced rich text editor has all the features developers are looking for.

www.tiny.cloud

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

Pricing | WYSIWYG HTML Editor | TinyMCE

 

그럼 필자가 확인한 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>​

 

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

반응형

댓글0