Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

Migrate from Content Tools

Initialization

This article provides a step-by-step guide on how to replace ContentTools with Froala Editor in your applications. Froala Editor is easy to integrate and use requiring minimal coding knowledge. Froala editor requires Font Awesome 4.4.0. Unlike ContentTools, you do not need to download Froala files on your machine or to define the regions of the page you want to be editable. You can watch the following recording as a starting point for migrating from ContentTools to Froala.


example00

Remove ContentTools Stylesheets and Scripts

First, remove all ContentTools code and its dependencies from your project.

  1. Remove the ContentTools script file

    <!-- Include stylesheet -->
      <link rel="stylesheet" type="text/css" href="assets/content-tools.min.css"/>
      

    <!-- Include the ContentTools library -->
      <script src="assets/content-tools.min.js"></script>
      
  2. Remove the ContentTools initialization script

    <script>
              window.addEventListener('load', function() {
                  var editor;
                  editor = ContentTools.EditorApp.get();
                  editor.init('*[data-editable]', 'data-name');
              });
       </script>
      
  3. Remove the “data-editable” and “data-name” tags to keep your HTML code clean as we don’t need them anymore, and give an id to the div element instead

    <div data-editable data-name="main-content">
              <blockquote>
                  Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.
              </blockquote>
              <p>John F. Woods</p>
          </div>

Add Froala Editor

Once all the ContentTools dependencies are removed, you can add Froala Editor following these steps:

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

    <!-- Include Font Awesome CSS. -->
      <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
      
      <!-- include editor style. -->
      <link href="https://cdn.jsdelivr.net/npm/froala-editor/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
      <link href="https://cdn.jsdelivr.net/npm/froala-editor/css/froala_style.min.css" rel="stylesheet" type="text/css"" />
      
  2. Add the JS files at the end of the BODY

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

    <!---Initialize Froala Editor--->
      <script>
        var editor = new FroalaEditor('#editor')
      </script>
      
      

Basic initialization example

Once you have completed all the previous steps, your code should look like this:

<!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Migrate from ContentTools to Froala</title>
      
      <!-- Include Font Awesome CSS. -->
      <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  
      <!-- Include editor styles. -->
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/froala_style.min.css" rel="stylesheet" type="text/css" />
    </head>
  
    <body>
      <h1>Migrate from ContentTools to Froala</h1>
       <div id="editor">
          <blockquote>
              Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.
          </blockquote>
          <p>John F. Woods</p>
      </div>
      
      <!-- Add editor JS files. -->
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/js/froala_editor.pkgd.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      
     <!-- Initialize the Froala Editor. -->
      <script>
        var editor = new FroalaEditor('#editor')  
      </script>
    </body>
  </html>
  

Do you think we can improve this article? Let us know.

Ready to dive in? Explore our plans

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1634883961" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_593646936" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1461093958" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>