svelte-quill

A package that contains a single action to be used on an element where you want to use QuillJS.

Demos

🌱 Simple demo

Installation

yarn add svelte-quill

Note: Install as a dev dependency (yarn add svelte-select --dev) if using Sapper to avoid a SSR error.

Usage

Simply use the action and listen to events using the text-change event. The event details contain the html (innerHTML, conveniently used with Sveltes @html directive) and text (a string of the contents).

<script>
  import { quill } from "svelte-quill";

  const options = { ... }

  let content;
</script>

<div class="editor" use:quill={options} on:text-change={e => content =
e.detail}/>

Or to retrieve the quill instance to make direct API calls:

<script>
  import { quill } from "svelte-quill";

  const options = { ... }
  var quillInstance;
  onMount(()=>{
        const editorDiv = document.getElementById("editor")
        quillInstance = quill(editorDiv, options)
        quillInstance.setText("Hello World")
    })
</script>

<div id="editor"/>

Options

{
  modules: {
    toolbar: [
      [{ header: [1, 2, 3, false] }],
      ["bold", "italic", "underline", "strike"],
      ["link", "code-block"]
    ]
  },
  placeholder: "Type something...",
  theme: "snow"
}

To customize you can pass in any of these options like so:

{
  placeholder: "Something Custom?";
}

Styling

Styling is done using the regular Quill CSS. You can either import them using ´svelte:head´ or add the css to some global.css file.

Here is an example:

<svelte:head>
    <link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</svelte:head>