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'],
})