Migrate from TinyMCE

Methods

Froala Rich Text Editor is designed so that you can achieve complex things with less lines of code. In the examples below, we're illustrating 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 following documentation page: Methods.

1. External button to clear the editor area

We are using a textarea as the DOM element to initialize the editors on and a button which would clear the content of the editor.

<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

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

$('textarea').on('froalaEditor.initialized', function (e, editor) {
  editor.events.$on($('body'), 'click', '#clear-text', function () {
    editor.html.set('');
    editor.events.focus();
  });
})
.froalaEditor();

2. Replace selection with specific content

In this second example, we would be using a custom button in the editor toolbar to replace the current selection with some specific HTML.

TinyMCE Code Example

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

// Define buttons.
$.FE.DefineIcon('mybutton', {NAME: 'plus'});
$.FE.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>');
    }
  }
});

$('textarea').froalaEditor({
  toolbarButtons: ['mybutton', 'html']
});