Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

Migration to Froala

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

Trix only loads on “trix-editor” elements, Froala uses a DOM selector to fetch the element that includes the editor. In the below example, we are using a div tag that has its id value set to ‘editor’ to get the containing element.

Froala Editor.

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

Froala Editor can initialize on more elements than other editors:

  • 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 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

Trix does not use plugins. Froala Editor has over 30 plugins, you can specify 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.

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

Froala, allows you to choose how to group buttons and choose them based on the screen resolution to properly display the editor on all devices. Please refer to Options to find a complete list of available options.

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_1593685558" 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_299205688" 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_1464006617" 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>