Toast UI Editor Component for Svelte

0.0.1 BETA

This is not official wrapper for Toast UI Editor. Inspired from Toast UI Editor for Vue.

Install

npm i -D tui-editor-svelte

yarn add -D tui-editor-svelte

pnpm i -D tui-editor-svelte

for rollup CSR users

set output.inlineDynamicImports to true for work perperly. The component is using dynamic import for both CSR and SSR compatible.

{
  // ...
  "output": {
    // ...
    inlineDynamicImports: true
  }
  // ...
}

for @sveltejs/kit users

add tui-editor-svelte in kit.vite.optimizeDeps.include array because @toast-ui/editor is a browser library.

{
    kit: {
        // ...
        vite: {
            // ...
      optimizeDeps: {
        include: ['tui-editor-svelte']
      }
      // ...
        }
    // ...
    }
}

Usage

Editor

<scrip>
import Editor from 'tui-editor-svelte/Editor.svelte';
</script>

<Editor initialValue="Markdown **rocks!**" />

Viewer

Editor

<scrip>
import Viewer from 'tui-editor-svelte/Viewer.svelte';
</script>

<Viewer initialValue="Markdown **rocks!**" />

Component properties

Editor

See Vue editor props.

Viewer

See Vue editor props.

Compoenet methods

Same as Vue editor instance methods. but usage is not same as vue. use like this:

<scrip>
import Editor from 'tui-editor-svelte/Editor.svelte';
let editor, html;
</script>

<Editor bind:this={editor} initialValue="Markdown **rocks!**" />

<button on:click={() => html = editor.invoke('getHtml')}>Get html content</button>
<pre>{html}</pre>

Component events

editor events are load,focus,blur,change,stateChange.

See Vue editor events and use like below:

<scrip>
import Editor from 'tui-editor-svelte/Editor.svelte';
</script>

<Editor on:load={() => console.log('TUI Editor loaded.')} initialValue="Markdown **rocks!**" />

Having issues? suggestions?

Feel free and add an issue.

Contribution for better component

use PNPM.

• Clone this repository.
• pnpm -r i
• pnpm run csr:dev
• pnpm run kit:dev

TODO

• <Editor/>
• <Viewer/>
• Test
• Storybook
• Documentation
• publish to NPM
• rollup SPA
• snowpack SPA
• sapper
• @svelte/kit
• Prepare for TUI Editor 3?

License

MIT.