Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.
/ tiptap-svelte Public archive

A port of tiptap (a renderless rich-text editor for Vue) to Svelte

Notifications You must be signed in to change notification settings

andrewjk/tiptap-svelte

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

tiptap-svelte

NOTE: This repository is now archived as tiptap 2.0 has official support for Svelte.

About

This editor is ported from tiptap, which is based on Prosemirror.

It is fully extendable and renderless. You can easily add custom nodes as Svelte components.

Getting started

TODO: Package for NPM

yarn add -D tiptap-svelte etc

Running the examples

# clone tiptap-svelte
git clone https://github.com/andrewjk/tiptap-svelte.git
cd tiptap-svelte

# install the dependencies for each project
cd tiptap-svelte && yarn install && cd ..
cd tiptap-svelte-extensions && yarn install && cd ..
cd tiptap-svelte-examples && yarn install && cd ..

# run the examples project
cd tiptap-svelte-examples
yarn run dev

Then point your browser to http://localhost:3000.

Basic setup

<script>
    // Import the editor
    import { Editor, EditorContent } from 'tiptap-svelte';
    import { onMount, onDestroy } from 'svelte';

    let editor;

    onMount(() => {
        editor = new Editor({
            content: '<p>This is just a boring paragraph</p>',
        })
    });

    onDestroy(() => {
        if (editor) {
            editor.destroy()
        }
    });
</script>

{#if editor}
    <EditorContent {editor} />
{/if}

About

A port of tiptap (a renderless rich-text editor for Vue) to Svelte

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published