Svelteでブログ編集画面にQuillを設定するためのスニペット

2024/04/30

SvelteでQuillを設定するためのスニペットです。

※ +page.server.svelteからblogの情報を取ってきて、エディターにセットしてます。
※ この画面はブログ更新用の画面です。

<script lang="ts">
    import { onMount } from "svelte";
    export let data: any;
    let quill;
    let blog = data.blog;
    onMount(async () => {
        const Quill = (await import("quill")).default;
        quill = new Quill("#editor", {
            theme: "snow",
        });
        if (blog.content) {
            quill.root.innerHTML = blog.content;
        }
    });
</script>

<svelte:head>
    <script
        src="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.js"
    ></script>
    <link
        href="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.snow.css"
        rel="stylesheet"
    />
</svelte:head>

<div id="editor"></div>

Quillドキュメント