Migrate from TinyMCE

Methods

Froala Editor is designed to obtain results with less lines of code. The examples below, show how to use Froala Editor options and how to achieve the same functionality in both TinyMCE and Froala Editor. A complete list of methods is available on the Methods documentation.

1. External button to clear the editor area

This example uses a textarea as the DOM element to initialize the editors and a button that clears the content of the editor.

Copy

<textarea>
      <p>This example illustrates how to clear the text using a button external to the Froala WYSIWYG HTML Editor interface.</p>
    </textarea>
    <button id="clear-text">Clear</button>
    

TinyMCE Code Example

Copy

tinymce.init({
      selector: 'textarea',
      init_instance_callback : function(editor) {
        var button = document.getElementById("clear-text");
        button.addEventListener("click", function () {
          editor.setContent('');
          editor.focus();
        });
      }
    });
    

Froala Editor Code Example

Copy

new FroalaEditor('textarea', function () {
      let editor = this;
      editor.events.$on(document.querySelector('body'), 'click', '#clear-text', function () {
        editor.html.set('');
        editor.events.focus();
      });
    });
    

2. Replace selection with specific content

This example uses a custom button in the editor toolbar to replace the current selection with specific HTML.

TinyMCE Code Example

Copy

tinymce.init({
      selector: 'textarea',
      menubar: false,
      plugins: 'code',
      toolbar: 'mybutton code',
      setup: function (editor) {
        // Define buttons.
        editor.addButton('mybutton', {
          text: false,
          icon: 'nonbreaking',
          onclick: function () {
            var blocks = editor.selection.getNode();
            var str = editor.selection.getContent({format:'text'});
    
            if(blocks.nodeName == 'SPAN') {
              editor.insertContent(str);
            } else {
              editor.insertContent('<span style="color: red;">' + str + '</span>');
            }
          }
        });
      }
    });
    

Froala Code Example

Copy

// Define buttons.
    FroalaEditor.DefineIcon('mybutton', {NAME: 'plus'});
    FroalaEditor.RegisterCommand('mybutton', {
      title: 'mybutton',
      callback: function () {
        var blocks = this.selection.element();
        var str = this.selection.text();
    
        if(blocks.tagName == 'SPAN') {
          this.html.insert(str);
        } else {
          this.html.insert('<span style="color: red;">' + str + '</span>');
        }
      }
    });
    
    new FroalaEditor('textarea', {
      toolbarButtons: ['mybutton', 'html']
    });