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);
    }
  }
});