Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

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.

<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

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

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.
    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']
    });
    

Do you think we can improve this article? Let us know.

Ready to dive in? Explore our plans

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_68742514" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_402196490" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1573384237" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>