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 editors.


1. Running the code

Other editors including Froala use a DOM selector to fetch the element that includes the editor. The following examples use a div tag with an id value set to ‘editor’ to get the containing element.

ProseMirror WYSIWYG Editor

    
     // Mix the nodes from prosemirror-schema-list into the basic schema to 
     // create a schema with list support. 
        const mySchema  =  new Schema({
            nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
            marks: schema.spec.marks
        })
        
        window.view =  new EditorView(document.querySelector("#editor"),{
            state: EditorState.create({
            doc: DOMParser.fromSchema(mySchema).parse(document.querySelector("#content")),
            plugins: exampleSetup({schema: mySchema})
            })
        })
      
    

Froala Editor.

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

You can initialize Froala 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 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 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.

ProseMirror WYSIWYG Editor

    // undo, redo plugim
    import {undo, redo, history} from "prosemirror-history"
    import {keymap} from "prosemirror-keymap"
    let state = EditorState.create({
    schema,
        plugins:[
            history(),
            keymap({"Mod-z": undo, "Mod-y": redo})
        ]
        let view = new EditorView(document.body,{state})
    })
    

Froala WYSIWYG Editor

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

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

3. Toolbar Customizations

Froala Editor comes with a highly customizable toolbar. 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.

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_912274428" 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_812131708" 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_770390700" 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>