Froala WYSIWYG Editor Svelte Wrapper

Features

• Two-way Data Binding: Seamlessly sync editor content with Svelte variables.

• Custom Configuration: Full access to all Froala options and events.

• Special Tag Support: Initialize the editor on <img>, <button>, <input>, and <a> tags.

• Manual Control: Programmatically initialize and destroy editor instances.

Installation

To install svelte-froala-wysiwyg run:

npm install svelte-froala-wysiwyg

Development Setup

npm install
npm run dev

Quick Start

Props

• model

• config

• tag

• editor

• manual

Methods

• initializeEditor()

• destroy()

• getEditor()

Basic Usage

Use the FroalaEditor component in your Svelte file:

<script>
  // Import the Froala wrapper component
  import FroalaEditor from "svelte-froala-wysiwyg";

  // Load Froala's bundled editor styles (toolbar, editor UI)
  import 'froala-editor/css/froala_editor.pkgd.min.css';

  // Load Froala's content styles (applies inside the editable area)
  import 'froala-editor/css/froala_style.css';

  // Reactive variable holding the editor's HTML content
  // bind:model keeps this in sync with the editor in real time
  let htmlContent = "<p>Hello, Froala!</p>";
</script>

<!--
  FroalaEditor component
  - bind:model: two-way binding — editor changes update htmlContent and vice versa
-->
<FroalaEditor bind:model={htmlContent} />

<!--
  Live preview of the editor's HTML output
  - {@html} renders the raw HTML string returned by the editor
  - Wrap in a sandboxed container to scope Froala's content styles
-->
<div class="preview">
  {@html htmlContent}
</div>

Advanced Usage

Custom Configuration

Pass any Froala Options via the config prop:

<script>
  const myConfig = {
    placeholderText: 'Start typing...',
    charCounterCount: false,
    toolbarButtons: ['bold', 'italic', 'underline', 'insertLink']
  };
</script>

<FroalaEditor config={myConfig} />

Handling Events

Events can be defined within the config.events object:

<script>
  const config = {
    events: {
      'contentChanged': function () {
        console.log('Content updated!');
      },
      'focus': function () {
        console.log('Editor focused');
      }
    }
  };
</script>

<FroalaEditor config={config} />

Special Tags (Non-div Elements)

Initialize Froala on elements like images or buttons. In this mode, the model becomes an object representing the element's attributes.

<script>
  let imageModel = {
    src: "https://froala.com/assets/img/logo.png",
    alt: "Froala Logo"
  };
</script>

<FroalaEditor tag="img" bind:model={imageModel} />

Manual Initialization

If you need to delay initialization or control it manually:

<script>
  let editorRef;

  function init() {
    editorRef.initializeEditor();
  }
</script>

<button on:click={init}>Initialize Editor</button>

<FroalaEditor
  bind:this={editorRef}
  manual={true}
  model="<p>Wait for it...</p>"
/>