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

Quick Start

Props

• model: Two-way bound editor content. An HTML string in normal mode; an object of element attributes in tag mode.

• config: Full Froala options object, including events.

• tag: The element type to initialize on: img, button, input, or a. Omit for a standard rich text div.

• editor: Bind to receive the live Froala editor instance, giving you direct access to all editor methods.

• manual: When true, the editor does not auto-initialize. You start it yourself with initializeEditor().

Methods

• initializeEditor(): Boots the editor manually. Use it with manual={true} to control exactly when the editor mounts.

• destroy(): Tears down the editor instance and restores the original element. Call it when you need to clean up before the editor is removed.

• getEditor(): Returns the underlying Froala editor instance so you can call any editor method on it.

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>

The example above uses Svelte 5. The bound variable is declared with the $state() rune so two-way binding can update it. On Svelte 3 or 4, use a plain let htmlContent = "..." instead. The bind: directive itself is identical across all versions.

Loading Plugins

Richer features, tables, image upload, font family, code view, live in plugin files. Import the plugin's JavaScript (and its CSS, if it has any), then add its buttons to toolbarButtons.

<script>
  import FroalaEditor from "svelte-froala-wysiwyg";
  import 'froala-editor/css/froala_editor.pkgd.min.css';
  import 'froala-editor/css/froala_style.css';

  // Load the Table plugin (JS and its stylesheet).
  import 'froala-editor/js/plugins/table.min.js';
  import 'froala-editor/css/plugins/table.min.css';

  // Load the Font Family plugin (JS only).
  import 'froala-editor/js/plugins/font_family.min.js';

  const config = {
    // Add the plugin buttons to the toolbar.
    toolbarButtons: ['bold', 'italic', 'insertTable', 'fontFamily']
  };
</script>

<FroalaEditor config={config} />

Import only the plugins you use. Each one adds to your bundle, so pulling in the whole set when you need two features ships code your users never run.

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>"
/>