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 loaded only on “trix-editor” elements, other editors including 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.

Aloha WYSIWYG Editor

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

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 WYSIWYG Editor.

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

Froala has the advantage of the ability to be initiated 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 WYSIWYG HTML 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 WYSIWYG HTML 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

WYSIWYG editors use plugins to make sure you only load the code you need, can replace parts of the system as needed, and to customize the editor behavior and functionality, while Trix doesn’t use plugins, Aloha, ProseMirror, and Froala uses it. Froala HTML WYSIWYG Editor has over 30 plugins, we can specify the required plugins at the initialization.

Note: All plugins are enabled by default without using the 'pluginsEnabled' option. Besides, each plugin requires including the corresponding CSS and JS files. Here is a 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']
            }
        }
    }
 }

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

Aloha and Froala Editors have a separate option that enables you to do a lot of customization for the toolbar. In Froala, It allows you not only to choose how to group buttons but also to choose them based on the screen resolution so that the editor looks fine on all devices. Please refer to Options to find a complete list of available options.

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 WYSIWYG Editor

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