Introduction

TinyMCE is a popular open-source WYSIWYG (what you see is what you get) HTML editor. It is designed to be used within web content management systems, online forums, and other web-based applications. It is available as a JavaScript library that can be integrated with other web technologies. It provides basic text editing features such as bold, italic, underline, font size, font color, and headings, as well as some advanced features such as tables, image insertion, and media embedding.

Add editing features to tinymce

TinyMCE can be extended with a variety of plugins that add additional editing features. Some popular plugins include a spellchecker, a visual table editor, a code editor, and a link checker. These plugins can be added to TinyMCE through the TinyMCE Plugin Manager. Additional plugins can also be added by downloading them from the TinyMCE website.

In addition to plugins, TinyMCE can also be customized by writing custom JavaScript code. This allows developers to add additional editing features to the editor, such as custom buttons and dialogs. Custom code can also be used to modify existing features, such as changing the way the editor behaves when a user changes the font or the size of an image.

Write custom Javascript code to customize tinymce

To write custom JavaScript code to customize TinyMCE, you first need to create a new JavaScript file and include it in your HTML page. Then, you can use TinyMCE’s API to make changes to the editor.

For example, you can add a custom button to the editor toolbar using the following code:

tinymce.init({
  selector: 'textarea',
  toolbar: 'increaseFont decreaseFont',
  editor.addButton('increaseFont', {
      // icon: element,
        text: 'A+',
        onclick:function(){                         
            var currentFontSize = editor.getContent({ format: 'html' }).match(/font-size: (\d+\w+)/);
            if (currentFontSize) {
                var currentSize = parseInt(currentFontSize[1].replace(/[^\d]/, ''));
                if(currentSize === 36){
                    return false;
                }
            var newFontSize = parseInt(currentFontSize[1].replace(/[^\d]/, '')) + 2;
            var newFontSizeUnit = currentFontSize[1].replace(/\d+/, '');
            editor.execCommand('fontSize', false, newFontSize + newFontSizeUnit);

            }else if(currentFontSize ===null){
                editor.execCommand('fontSize', false, 14 + 'pt');

            }
        }
    });
    editor.addButton('decreaseFont', {
        // icon: '',
        text: 'A-',
        onclick:function(){                         
            var currentFontSize = editor.getContent({ format: 'html' }).match(/font-size: (\d+\w+)/);
            if (currentFontSize) {
                var currentSize = parseInt(currentFontSize[1].replace(/[^\d]/, ''));
                if(currentSize === 8){
                    return false;
                }
            var newFontSize = parseInt(currentFontSize[1].replace(/[^\d]/, '')) - 2;
            var newFontSizeUnit = currentFontSize[1].replace(/\d+/, '');
            editor.execCommand('fontSize', false, newFontSize + newFontSizeUnit);

            }else if(currentFontSize ===null){
                editor.execCommand('fontSize', false, 10 + 'pt');

            }
        }
    })

});

This code adds two new button to the TinyMCE editor toolbar with the text “A+ and A-”. When the A+ button is clicked, the code inside the onclick function will be executed which increases the font on the selected text. Aso, When the A- button is clicked, the code inside the onclick function will be executed which decreases the font on the selected text. You can add more buttons to the editor by adding more addButton() calls to the setup function.