Skip to content
Star

Migrate from CKEditor to Froala

Initialization Options

Initialization

This guide will explain the steps that are to be followed to replace your project’s editor that is CKEditor and take it to Froala WYSIWYG.

Froala is an HTML Editor that is easy to integrate and use that requires minimal coding knowledge.

Go through the video and follow the steps to change your editor to Froala.


Step by step procedure:

example

Remove CKEditor Script

Initially remove all the code and dependencies usage of CKEditor from the projects.

Commonly scripts included the following:

<!-- CKEditor script file. -->
<script src='https://cdn.ckeditor.com/ckeditor5/16.0.0/classic/ckeditor.js'></script>


CKEditor initialization script.
ClassicEditor
    .create(document.querySelector(".selector"))
    .catch(error => {
      console.error(error);
    });

Add Froala Editor

Once CKEditor dependencies are all erased, start adding the Froala Editor files.

Follow these steps

1. Include the CSS files required in the HEAD tag.

<!-- include editor style. -->
<link href="https://cdn.jsdelivr.net/npm/froala-editor/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />

2. Add the JS files at the end of the BODY

<!-- Include editor JS files. -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor/js/froala_editor.pkgd.min.js"></script>

3. Call the editor initialization.

<!-- Initialize the Froala Editor. -->
new FroalaEditor("textarea",{
  toolbarButtons: ['undo', 'redo', '|', 'bold', 'italic', 'underline']
});

The initialization example:

After you have followed the above steps your HTML page would look similar to the example mentioned under

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">

    <!-- Include editor styles. -->
    <link href="https://cdn.jsdelivr.net/npm/froala-editor/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <!-- Create a tag that we will use as the editable area. -->
    <!-- You can use a div tag as well. -->
    <textarea></textarea>

    <!-- Add editor JS files. -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor/js/froala_editor.pkgd.min.js"></script>

    <!-- Initialize Froala Editor. -->
    <script>
      new FroalaEditor(“textarea”);
    </script>
  </body>
</html>
File: 5011