JSFiddle - React, Tailwind, and code Playground

by John Schulz

HTML

<textarea name="textarea-1" class="mceEditor" rows="2">Input your text here</textarea>
<textarea name="textarea-2" class="mceEditor" rows="2">Input your text here</textarea>
<textarea name="textarea-3" class="mceEditor" rows="2">Input your text here</textarea>
<textarea name="textarea-4" class="mceEditor" rows="2">Input your text here</textarea>

JavaScript

var Taubman = {};
(function ($){ 

    Taubman.characterLimit = function (config)
    {
        var defaults = {
                max:        100,
                area:       'textarea',
                //notice:     $area.siblings('.notification'),
                //remain:     $notice.find('.value'),
                //len:        $area.text().length,
                onKeypress: function (event)
                { console.log('kp', event, this.value, $(this).text);
                    if (this.value.length >= max) {
                        this.value = this.value.substr(0, max);
                    }
                    
                    $remain.text(max - this.value.length);
                }
            },
            settings = $.extend(true, defaults, config),
            $remain = $(settings.remain);
                    

        // logic / flow
        $remain.text(settings.max - (settings.len || 0));
        $(settings.area).bind('keypress keyup', settings.onKeypress);

    }

    // jQuery shortcut to onDOMReady
    jQuery(function ($)
    {
        addCharacterLimits();
    });
    
    function addCharacterLimits()
    {
        var mce_class = 'mceEditor',
            mce_selector = '.' + mce_class,
            notice_html = '<span class="limit-notification"><strong class="remaining"></strong> characters remaining</span>',
            $notice = $(notice_html),
            $remaining = $notice.find('.remaining');

        // find all tinyMCE instances
        $('textarea').filter(mce_selector).each(function (i, editor)
        {
            var $area = $('#'+ editor.id +'_ifr').contents().find('#tinymce');

            // append the notification element
            $(editor).siblings(mce_selector, 'span').append($notice);
            
            // apply limit behavior
            Taubman.characterLimit({
                area: $area,
                max: 100,
                notice: $notice,
                remain: $remaining
            });
       ...