Migrate from Tiptap to Froala

Options

This section shows how to pass different Froala Editor options when you migrate from Tiptap.

Enabled Features

In Tiptap

Copy

  import { Editor } from '@tiptap/core'
  import StarterKit from '@tiptap/starter-kit'
  import Document from '@tiptap/extension-document'
  import Paragraph from '@tiptap/extension-paragraph'
  import Text from '@tiptap/extension-text'
  import Highlight from '@tiptap/extension-highlight'

  new Editor({  
    // Use the default extensions
    extensions: [StarterKit],
    
    // … or use specific extensions
    extensions: [Document, Paragraph, Text],
    
    // … or both
    extensions: [StarterKit, Highlight],
  })

In Froala

Copy

  new FroalaEditor('.selector', {  
    // enable specific plugins
    pluginsEnabled: ['image', 'link']
  })

Force the cursor to jump in the editor on initialization.

In Tiptap

Copy

  new Editor({  
    // register extensions
    extensions: [StarterKit],

    // disable autofocus
    autofocus: false,
  })

In Froala

Copy

  new FroalaEditor('.selector', {
  
    // disable autofocus
    autofocus: false
  
  })

Paste Rules

In Tiptap

Copy

  new Editor({  
    // enable paste rules
    enablePasteRules: [Link, 'horizontalRule'],
  })

In Froala

Copy

  new FroalaEditor('.selector', {
    
    // define allowed styles to paste
    pasteAllowedStyleProps: ['font-family', 'font-size', 'color'],
    
    // specify denied attributes to paste
    pasteDeniedAttrs: ['class', 'id'],
    
    // define denied HTML tags to paste
    pasteDeniedTags: ['a', 'i']
    
  });

Input Rules

In Tiptap

Copy

  new Editor({  
    // enable input rules
    enableInputRules: [Link, 'horizontalRule'],
  })

In Froala

Copy

  new FroalaEditor('.selector', {
  
    // allowed HTML attributes
    htmlAllowedAttrs: ['title', 'href', 'alt', 'src', 'style'],
    
    // allowed HTML style properties
    htmlAllowedStyleProps: ['font-family', 'font-size', 'background', 'color'],
    
    // allowed HTML tags
    htmlAllowedTags: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
  
  })