Migrate from Tiptap to Froala

Events

Froala offers a wider variety of events than Tiptap. This guide provides a side by side comparison of using the Froala Editor events next to Tiptap ones. For a full list of events, please check the Events documentation.

Editor is Ready

In Tiptap

Copy

  const editor = new Editor({  
    // onCreate callback function to indicate when the editor is ready
    onCreate({ editor }) {
      // The editor is ready.
    },
  })

In Froala

Copy

  const editor = new FroalaEditor('.selector', {
    events: {
      'initialized': function () {
        // Do something here.
        // this is the editor instance.
        console.log(this);
      }
    }
  });

Content has changed

In Tiptap

Copy

  const editor = new Editor({  
    // handle updates in the editor
    onUpdate({ editor }) {
      // Add update logic here
    },
  })

In Froala

Copy

  const editor = new FroalaEditor('.selector', {
    events: {
      'contentChanged': function () {
        // Do something here.
        // this is the editor instance.
        console.log(this);
      }
    }
  });

The editor is focused

In Tiptap

Copy

  const editor = new Editor({  
    // define a callback for when the editor gains focus
    onFocus: ({ 
      editor, event 
    }) {
      // custom logic for handling focus event goes here
    },
  })

In Froala

Copy

  const editor = new FroalaEditor('.selector', {
    events: {
      'focus': function () {
        // Do something here.
        // this is the editor instance.
        console.log(this);
      }
    }
  });

The editor is not focused anymore

In Tiptap

Copy

  const editor = new Editor({
    onBlur({ editor, event }) {
      // Your code goes here
    },
  })

In Froala

Copy

  const editor = new FroalaEditor('.selector', {
    events: {
      'blur': function () {
        // Do something here.
        // this is the editor instance.
        console.log(this);
      }
    }
  });

The editor is being destroyed

In Tiptap

Copy

  const editor = new Editor({  
    // Define the onDestroy lifecycle method
    onDestroy() {
      // Place your destruction logic here
    },
  })

In Froala

Copy

  const editor = new FroalaEditor('.selector', {
    events: {
      'destroy': function() {
        // Do something here.
        // this is the editor instance.
        console.log(this);
      }
    }
  });

The editor is being pasted into

In Tiptap

Copy

  const editor = new Editor({
    // Define custom event handlers for paste and drop actions
    onPaste: function(event: ClipboardEvent, slice: Slice) {
      // The editor is being pasted into.
    },
    onDrop: function(event: DragEvent, slice: Slice, moved: boolean) {
      // The editor is being pasted into.
    },
  })

In Froala

Copy

  const editor = new FroalaEditor('.selector', {
    events: {
      'paste.before': function (original_event) {
        // Do something here.
        // this is the editor instance.
        console.log(this);
      },
      'paste.after': function () {
        // Do something here.
        // this is the editor instance.
        console.log(this);
      },
      'paste.wordPaste': function (clipboard_html) {
        // Do something here.
        // this is the editor instance.
        console.log(this);
      }
    }
  });