Options

The following guide explains how to pass different Froala Editor options and highlight what you should do when you migrate from CKEditor. Where possible, we are doing a side by side comparison so that you can easily spot the differences.

1. Running the code

Both Froala and CKEditor are using a DOM selector in order to target the element that the editor would transform into an editable area. In the example below, we are using a textarea tag, though you could use any DOM selector to target elements from your page.

ClassicEditor
    .create(document.querySelector("textarea"))
    .catch(error => {
      console.error(error);
    });

new FroalaEditor('textarea')

2. Working with plugins

Froala WYSIWYG HTML Editor comes with over 30 plugins. Enabling them can be done very handy by specifying the plugins we want to use at the initialization.

Note: By default, all plugins are enabled without using the pluginsEnabled option. Also, each plugin requires you to include the corresponding JS and CSS files. Here is the complete list of plugins and the files required by them.

import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
export default class ClassicEditor extends ClassicEditorBase {}

ClassicEditor.builtinPlugins = [
  Essentials,
  UploadAdapter,
  Autoformat,
  Bold,
  Italic,
  BlockQuote,
  EasyImage,
  Heading,
  Image,
  ImageCaption,
  ImageStyle,
  ImageToolbar,
  ImageUpload,
  Link,
  List,
  Paragraph,
  Alignment                 // <--- ADDED
];

new FroalaEditor('textarea', {
  pluginsEnabled: ['image', 'link']
});

3. Using the toolbar

Froala Editor comes with a lot of room for customization when it comes to the toolbar. Not only can you choose how you group buttons together, but you can choose them to adapt based on the screen size so that the editor looks good on all devices. For the complete list of options please see more in Options.

CKEditor

ClassicEditor.defaultConfig = {
  toolbar: {
    items: [
      'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'imageUpload', 'blockQuote', 'undo', 'redo'
    ]
  }
}

Froala Editor

new FroalaEditor('textarea', {
  toolbarButtons: [
    'bold', 'italic', 'insertLink’, ‘formatUL’, ‘formatOL’, ’insertImage’, ‘quote’, ‘undo', 'redo'
  ]
});