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

Copy

<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

Copy

 <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

Copy

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

Copy

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

Copy

  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

Copy

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

Copy

 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

Copy

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