Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

Migrate from Content Tools

Options

The following guide explains how to pass different Froala Editor options and highlights what to do when migrating from ContentTools.


1. Running the code

ContentTools can be used only for elements that have “data-editable” tags, in contrast Froala can be loaded on any element. Both of them use a DOM selector to fetch the element that includes the editor. The example below, uses a div tag to get the containing element. With ContentTools you must use a block level HTML element like “div” but with Froala you can use other DOM elements such as textarea or span as the target elements in your page.

ContentTools

<div data-editable data-name="main-content">
            <p>John F. Woods</p>
        </div>
        <script src="assets/content-tools.min.js"></script>
        <script>
            window.addEventListener('load', function() {
                var editor;
                editor = ContentTools.EditorApp.get();
                editor.init('div[data-editable]', 'data-name');
            });
        </script>
    

Froala Editor

 <div id="main-content">
            <p>John F. Woods</p>
      </div>
    const editor = new FroalaEditor('#main-content);
    

Froala can be initiated on an image using the image.min.js plugin

<!-- HTML -->
    <img id="edit" src="https://raw.githubusercontent.com/froala/wysiwyg-editor/master/editor.jpg"	alt="Old Clock" width="300"/>
     
    <!-- Javascript -->
    <script>
        new FroalaEditor('img#edit');
    </script>
    
    

It is possible to initialize the Froala Editor on click on an element

<!-- HTML -->
     <div id="editor">Hello ContentTools</div>
     
      <!-- Javascript -->
      <script>
        new FroalaEditor('#editor', {
        initOnClick: true
        });
      </script>
    

2. Working with plugins

ContentTools uses Tools to customize its behavior and functionality, Forala uses Plugins to do the same. Froala Editor has over 30 plugins, you can specify the required plugins 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.

ContentTools

  window.addEventListener('load', function() {
                var editor;
                editor = ContentTools.EditorApp.get();
                //init contentTools
                editor.init('*[data-editable]', 'data-name');
                toolbox = editor.toolbox();
                //enabled tools
                tools = [
                            [
                                'bold',
                                'italic',
                                'link',
                                'align-left',
                                'align-center',
                                'align-right'
                            ], [
                                'image',
                                'video',
       'preformatted'
                            ], 
                        ];
                //set tools
                toolbox.tools(tools);
            });
     
    
    

Froala Editor

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

If you do not find the plugin you want, you can create your own.


3. Toolbar Customizations

In ContentTools the tools you enable are responsible for displaying buttons on the toolbar, Froala Editor has a separate option that enables you to customize the toolbar. It allows you not only to choose how to group buttons but also to choose them based on screen resolution, this allows the editor to display properly on all devices. Refer to Options to find a complete list of available options.

ContentTools toolbar customizations

 window.addEventListener('load', function() {
                var editor;
                editor = ContentTools.EditorApp.get();
                //init contentTools
                editor.init('*[data-editable]', 'data-name');
                toolbox = editor.toolbox();
                //enabled tools
                tools = [
                            [
                                'bold',
                                'italic',
                                'link',
                                'align-left',
                                'align-center',
                                'align-right'
                            ]
                        ];
                //set tools
                toolbox.tools(tools);
            });
    
    

Froala Editor

<script>
        new FroalaEditor('#editor', {
            pluginsEnabled: ['image', 'link','Table'],
            toolbarButtons: [
            'undo', 'redo', '|', 'bold', 'italic', '|', 'insertLink', 'insertImage', '-',
             'alignLeft', 'alignCenter', 'alignRight'
             ]}
        );
    </script>
    

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_228496937" 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_1704153516" 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_1698637300" 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>