Migrate from Tiptap to Froala

Initialization

This is a step-by-step guide on how to replace Tiptap with Froala Editor in your projects. Froala Editor is an easy to integrate and easy to use plugin that requires minimal coding knowledge.

In most cases, you initialize Tiptap by specifying where it should be rendered (element), the functionalities you want to enable (extensions), and the initial content of the document.. Ending up with code like this:

Copy

  import { Editor } from '@tiptap/core'
  import Document from '@tiptap/extension-document'
  import Paragraph from '@tiptap/extension-paragraph'
  import Text from '@tiptap/extension-text'

  new Editor({  
    // bind Tiptap to .element
    element: document.querySelector('.element'),
    
    // register extensions
    extensions: [Document, Paragraph, Text],
    
    // set the initial content
    content: '<p>Example Text</p>',
    
    // place the cursor in the editor after initialization
    autofocus: true,
    
    // make the text editable (but that’s the default anyway)
    editable: true,
    
    // disable the loading of the default CSS (which is not much anyway)
    injectCSS: false,
  })

Migrate this code to Froala using the steps below:

Remove Tiptap

Remove all Tiptap packages and dependencies from your project.

Copy

  npm uninstall @tiptap/core @tiptap/pm @tiptap/starter-kit
  

Replace the Tiptap import statements with the appropriate Froala import statements in your code.

Copy

  import FroalaEditor from 'froala-editor'
  
  // Load a plugin.
  import 'froala-editor/js/plugins/align.min.js'
  import 'froala-editor/js/plugins/font_size.min.js'
  import 'froala-editor/js/plugins/font_family.min.js'
  import 'froala-editor/js/plugins/paragraph_format.min.js'

Swap the Tiptap constructor for the Froala constructor and include the relevant Froala options.

Copy

  new FroalaEditor('.element', {  
    // enable autofocus
    autofocus: true,
    
    // enable specific plugins
    pluginsEnabled: ['align', 'fontFamily', 'fontSize', 'paragraphFormat']
  })