Options

The following guide explains how to pass different Froala Editor options and highlights what to do when migrating from ContentTools. There, we have provided the corresponding Froala editor code to the ContentTools code.

1. Running the code

ContentTools can be used only for elements that have “data-editable” tags, on the other hand, Froala can be loaded on any element. Both of them use a DOM selector to fetch the element that includes the editor. In the below example, we are using 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.

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

 <div id="main-content">
        <p>John F. Woods</p>
  </div>
const editor = new FroalaEditor('#main-content);

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

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

  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);
        });
 

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

3. Toolbar Customizations

In ContentTools the tools you enabled are responsible for displaying buttons on the toolbar, on the other hand, Froala Editor has a separate option that enables you to do a lot of customization for the toolbar. 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.

ContentTools toolbar customizations

 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

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