Migrate from CKEditor to Froala

Options

This section shows how to pass different Froala Editor options and highlights what to do when you migrate from CKEditor.

1. Running the code

Both Froala and CKEditor use a DOM selector as the element that the editor transforms into an editable area. The example below uses a textarea, you can also use any other DOM selector to target elements.

CKEditor

Copy

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

Froala Editor

Copy

new FroalaEditor('textarea')

2. Working with plugins

Froala Editor comes with over 30 plugins. You can enable the plugins you want to use at 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.

CKEditor

Copy

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
    ];
    

Froala Editor

Copy

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

3. Using the toolbar

Froala Editor comes with a highly customizable toolbar. You can choose how to group buttons and also set them to adapt based on the screen size, this allows the editor to display properly on all devices. For a complete list of options please refer to the Options documentation.

CKEditor

Copy

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

Froala Editor

Copy

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