svelte-editor-quill

Svelte component

Install

Svelte 5

$ npm i @tadashi/svelte-editor-quill@4

Svelte Legacy

$ npm i @tadashi/svelte-editor-quill@3

Usage

options

Type: object
Default: {theme: 'snow'}

See the more options here.

options.plainclipboard

Type: boolean
Default: false

Accept only paste plain text.

E.g.

Example via StackBlitz.

<script>
  import { Editor } from '@tadashi/svelte-editor-quill'

  const options = {
    theme: 'snow',
    plainclipboard: true,
  }

  let html = $state('<h1>Go!!</h1><p><strong>Initial</strong> value.</p>')
  let text = $state('')

  const onTextChange = (markup, plaintext) => {
    html = markup
    text = plaintext
  }
</script>

<svelte:head>
  <link
    rel="stylesheet"
    href="https://unpkg.com/[email protected]/dist/quill.snow.css"
    crossorigin
  />
</svelte:head>

<Editor
  {options}
  {onTextChange}
>{@html $state.snapshot(html)}</Editor>

<div>
  <h3>plaintext</h3>
  <pre>{text}</pre>
</div>

<div>
  <h3>markup</h3>
  <pre>{html}</pre>
</div>

Buy Me a Coffee

BTC: bc1q7famhuj5f25n6qvlm3sssnymk2qpxrfwpyq7g4

License

MIT © Thiago Lagden