검색해보면 쓸만한 에디터라고 해서 몇개 추천한 글이 있습다. 

https://asecurity.dev/entry/Svelte-%EC%93%B8%EB%A7%8C%ED%95%9C-OpenSource-Editor-%EC%B0%BE%EA%B8%B0

 

그래서 다 써봤습니다. 

결론은 다 안된다.

 

sveltekit 이 정식버전 나오면서 몇몇 변경사항이 있었는데,

이부분이 아직 반영이 안되고 있는것 같습니다.

주로 SSR 부분인데,

서버측 렌더링고 클라이언트측 렌더링 등의 이슈가 있습니다.

 

직접 만들어서 쓰는 모듈은 어떻게 해보겠는데

npm i 로 설치하다 쓰는건 나중에 

프로젝트 공유등의 문제로

설정을 변경해서 쓰기가 좀 그렇습니다.

 

 

그럼에도 불구하고

에러 안나는 것을 찾아서 하나 만들어 냈습니다.

잘 아시는 CKEditor5 입니다.

 

설정을 시도했던 에디터들

tiny : 바로 붙어서 잘되는가 싶더니, 중간중간 에러가 납니다. 그럼 사이트 멈춥니다.

quill : 안됨

toast : 안됨

 

그래서 

현시점 되는에디터는

CKEditor5 입니다. 그런데 이것도 isReadOnly 설정이 안된다고해서 에러가 나는데 에러나는 곳 주석 처리해서 사용 가능하게 변경하였습니다.

 

그리고 단점이 하나 있는데

한페이지에 1번만 불러올수 습니다.

찾아보니 id 값을 기준으로 생성된다는데 이게 고정인 것 같습니다.

 

 

설치방법은 다음과 같습니다.

npm i ckeditor5-svelte

npm i @ckeditor/ckeditor5-build-decoupled-document

 

아래 내용을 컴포넌트로 파일로 만들어서 import 해서 사용 하시면 됩니다.

 

전 CKEditor.svelte 파일로 저장후

 

사용할 페이지에서

import CKEditor from "$lib/component/CKEditor.svelte"

 

<CKEditor bind:editorData={wr_content} /> 

 

이렇게 불러와서 사용합니다. 

 

주의 하실점은 애석하게도

 

 /node_modules\ckeditor5-svelte\src\Ckeditor.svelte 를 열어서

 42 라인 쯤의 //editor.isReadOnly = disabled; 를 주석처리(안하면 변경내용 binding 이 안됨)

이부분을 수작업으로 주석처리해야합니다.

 

그래서 만약 서버에 git으로 올리게 되면 서버에 직접 접속해서 동일하게 저부분을 주석처리 해줘야한다는 귀찮음이 생기게 됩니다.

 

아래는 파일 내용입니다.

<script lang="ts">

    // npm i ckeditor5-svelte

    // npm i @ckeditor/ckeditor5-build-decoupled-document/build/ckeditor

    // /node_modules\ckeditor5-svelte\src\Ckeditor.svelte 를 열어서

    // 42 라인 쯤의 //editor.isReadOnly = disabled; 를 주석처리(안하면 변경내용 binding 이 안됨)

 

    import { onMount } from 'svelte';

    let CKEditor: any;

 

    let Font: any;

    onMount(async () => {

        if (typeof window !== 'undefined') {

            CKEditor = (await import('ckeditor5-svelte')).default;

            editor = (await import('@ckeditor/ckeditor5-build-decoupled-document/build/ckeditor'))

                .default;

        }

    });

 

    // Setting up editor prop to be sent to wrapper component

    let editor: any;

    // Reference to initialised editor instance

    let editorInstance: any = null;

    // Setting up any initial data for the editor

    export let editorData = '';

 

    //아래 설정 지우시면 let editorConfig: any = {} 모든 에디터 기능 다 나옵니다.

    //버튼에 마우스오버하면 설정이름 나오는데, 눈찌껏 대문자 넣어서 네이밍 옵션에 넣으면 사굥가능합니다.

    let editorConfig: any = {

        toolbar: {

            items: [

                'heading',

                '|',

                'fontFamily',

                'fontSize',

                'bold',

                'italic',

                'underline',

                'fontColor',

                'fontBackgroundColor'

            ]

        }

    };

 

    function onReady({ detail: editor }) {

        // Insert the toolbar before the editable area.

 

        editorInstance = editor;

 

        editor.ui

            .getEditableElement()

            .parentElement.insertBefore(editor.ui.view.toolbar.element, editor.ui.getEditableElement());

    }

</script>

 

<main>

    <div class="backboard">

        {#if CKEditor && editor}

            <CKEditor bind:editor on:ready={onReady} bind:config={editorConfig} bind:value={editorData} />

        {/if}

    </div>

</main>

 

<style>

    .backboard {

        width: 100%;

        /* border: 1px solid #ccc; */

        background-color: #fff;

        border-radius: 5px;

        box-sizing: border-box;

    }

</style>