Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

Migration to Froala from Aloha

Options

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


1. Running the code

Aloha and Froala use a DOM selector to fetch the element that includes the editor. The following example uses a div tag that has its id value set to ‘editor’ to get the containing element.

Aloha WYSIWYG Editor

<script type="text/javascript">
        Aloha.ready(function(){
            Aloha.jQuery('#editor').aloha();
        });
    </script>
    

Froala Editor.

    <script>
        var editor = new FroalaEditor('#editor');
    </script>
    

Froala Editor can initialize on more elements than other editors:

  • You can initiate Froala 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 only on a button
<!-- HTML -->
    <button id="edit" class="btn r-btn highlight text-small">Button</button>
    <!-- Javascript  -->
    <script>
        new FroalaEditor('button#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

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.

Aloha WYSIWYG Editor

        
     Aloha.settings = {
        plugins:{
            format:{
            // all elements with no specific configuration get this configuration
            config:['b', 'i', 'sub', 'sup', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
                editables:{
                // no formatting allowed for title
                '#title': [],
                // just bold and italic for the teaser
                '#teaser': ['b', 'i']
                }
            }
        }
     }
    
    

Froala Editor

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

If you don’t find the plugin you want, you can create your own.

3. Toolbar Customizations

Aloha and Froala Editors allow the customization of the toolbar. In Froala Editor 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.

Aloha toolbar customizations

    Aloha.settings.toolbar = {
        tabs: [
            {
                label: 'Format',
                components: [
                    ['bold', 'italic', 'underline', '\n', 'subscript', 'superscript', 'strikethrough'],
                    ['formatBlock']
                ]
            },
            {
            label: 'Insert',
            exclusive: true,
            components: [
                    ["createTable", "characterPicker", "insertLink"],
                    ['myArena']
                ]
            },
            {
            label: 'Link',
            components: ['editlink']
            }
        ],
        exclude:['strong', 'emphasis', 'strikethrough'],
        responsiveMode: false
    };
    

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_474397199" 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_328650800" 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_777736024" 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>