Svelte Editor Quill

svelte-editor-quill

Svelte component

Install

$ npm i @tadashi/svelte-editor-quill

Usage

Example via StackBlitz.

options

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

See the more options here.

options.plainclipboard

Type: boolean
Default: false

Accept only paste plain text.

Sample

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

  const options = {
    theme: 'snow',
  }

  let data = 'Apenas <b>um</b> show'
  let text = ''
  let html = ''

  const onTextChange = event => {
    ;({text, html} = event?.detail ?? {})
    data = html
  }
</script>

<svelte:head>
  <link
    rel="stylesheet"
    href="https://unpkg.com/quill@2.0.2/dist/quill.snow.css"
    crossorigin
  />
</svelte:head>

<Editor
  {options}
  {data}
  on:text-change="{onTextChange}"
/>

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

<div>
  <h3>HTML</h3>
  <pre>{@html html}</pre>
</div>

<div>
  <h3>Data</h3>
  <pre>{@html data}</pre>
</div>

Buy Me a Coffee

BTC: bc1q7famhuj5f25n6qvlm3sssnymk2qpxrfwpyq7g4

License

Top categories