svelte-flowbite-rich-text-editor

This package is a fork of @flowbite-svelte-plugins/texteditor (Github, NPM) and can be used as a drop-in replacement.

Documentation

Use the wysiwyg text editor component to create and modify content by manipulating paragraphs, headings, images and styling them using all available options.

Installation

pnpm i -D svelte-flowbite-rich-text-editor

Text editor example

<script lang="ts">
    import {
        AlignmentButtonGroup,
        FontButtonGroup,
        UndoRedoButtonGroup,
        FormatButtonGroup,
        LayoutButtonGroup,
        ImageButtonGroup,
        ListButtonGroup,
        YoutubeButtonGroup,
        TextEditor,
        EditorConfig,
        ToolbarRowWrapper,
        Divider,
        SourceButton
    } from 'svelte-flowbite-rich-text-editor';
    import type { Editor } from '@tiptap/core';
    import { Button } from 'flowbite-svelte';

    let editorInstance = $state<Editor | null>(null);

    function getEditorContent() {
        return editorInstance?.getHTML() ?? '';
    }

    function setEditorContent(content: string) {
        editorInstance?.commands.setContent(content);
    }

    const content = `<p>Flowbite-Svelte is an <strong>open-source library of UI components</strong> based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, and more.</p><p>It includes all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, datepickers, advanced charts and the list goes on.</p>
    <p>Here is an example of a js block:</p><pre><code class="language-javascript">for (var i=1; i <= 20; i++)
{
  if (i % 15 == 0)
    console.log("FizzBuzz");
  else if (i % 3 == 0)
    console.log("Fizz");
  else if (i % 5 == 0)
    console.log("Buzz");
  else
    console.log(i);
}</code></pre><p>Learn more about all components from the <a href="https://flowbite-svelte.com/docs/pages/quickstart">Flowbite-Svelte Docs</a>.</p>`;
</script>

<svelte:head>
    <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/base16/google-dark.min.css"
    />
</svelte:head>

<EditorConfig
    imageOptions={{
        inline: true,
        allowBase64: true
    }}
>
    <TextEditor bind:editor={editorInstance} {content}>
        <ToolbarRowWrapper>
            <FormatButtonGroup editor={editorInstance} />
            <Divider />
            <FontButtonGroup editor={editorInstance} />
            <Divider />
            <AlignmentButtonGroup editor={editorInstance} />
        </ToolbarRowWrapper>
        <ToolbarRowWrapper top={false}>
            <UndoRedoButtonGroup editor={editorInstance} />
            <Divider />
            <LayoutButtonGroup editor={editorInstance} />
            <Divider />
            <ListButtonGroup editor={editorInstance} />
            <Divider />
            <ImageButtonGroup editor={editorInstance} />
            <Divider />
            <YoutubeButtonGroup editor={editorInstance} />
            <SourceButton editor={editorInstance} />
        </ToolbarRowWrapper>
    </TextEditor>
</EditorConfig>

<div class="mt-4">
    <Button onclick={() => console.log(getEditorContent())}>Get Content</Button>
    <Button onclick={() => setEditorContent('<p>New content!</p>')}>Set Content</Button>
</div>