Jetformbuilder and Jetengine form: Dynamic Word Limit Control for TinyMCE Editors ( Wysiwyg Field )

gistfile1.txt

Enhance Jetformbuilder and Jetengine form ' TinyMCE editors (WYSIWYG Field) with a dynamic word limit control feature. 
This script adds an interactive word count display that not only tracks the number of words typed but also dynamically 
adjusts the text content to adhere to a predefined limit. The functionality is designed to provide visual feedback and 
prevent over-typing by automatically trimming text to the set limit.

1. Firstly, copy the custom PHP code and paste it into your snippet plugins. Create a new PHP snippet and save it as "Everywhere".
2. In Jetengine form, add a WYSIWYG Field, and the form field name is: text_count_limit_jetengine, and for Jetformbuilder
WYSIWYG Field and the form field name is: text_count_limit_jetformbuilder
3. You can adjust the variable 'limit' to control the word limit for this specific editor. Currently, it's set to 100, 
but you can change it to suit your needs. Find this line and change it: var limit = 100; // Word limit for this specific editor.

_________________________________________________________________

function add_custom_word_limit_for_wp_editor_text_count_limit() {
    ?>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            var limit = 100; // Word limit for this specific editor
            var editorDataIds = ['wp_editor_text_count_limit', 'wp_editor_text_count_limit_jetengine', 'wp_editor_text_count_limit_jetformbuilder']; // Array of editor IDs
            var isLimitExceeded = false; // Flag to check if limit is exceeded

            function applyWordLimitToEditor(dataId) {
                var editors = tinymce.editors;
                var targetEditor = null;
                for (var i = 0; i < editors.length; i++) {
                    if (editors[i].getBody().getAttribute('data-id') === dataId) {
                        targetEditor = editors[i];
                        break;
                    }
                }

                if (!targetEditor) {
                    console.error("Editor with data-id '" + dataId + "' not found.");
                    return;
                }

                var wordCountDisplay = document.createElement('div');
                wordCountDisplay.className = 'editor-word-count-display-unique';
                targetEditor.getContainer().parentNode.insertBefore(wordCountDisplay, targetEditor.getContainer().nextSibling);

                function updateWordCount() {
                    var textContent = targetEditor.getContent({format: 'text'}).trim();
                    var wordCount = textContent.split(/\s+/).filter(Boolean).length;
                    wordCountDisplay.textContent = "Words: " + wordCount + "/" + limit;

                    if (wordCount > limit) {
                        if (!isLimitExceeded) {
                            alert('Word limit reached. Current word count: ' + wordCount + '. Word count limit: ' + limit + '. Please adjust your text to add more.');
                            isLimitExceeded = true;
                        }
                        var trimmedText = textContent.split(/\s+/).slice(0, limit).join(' ');
                        targetEditor.setContent(trimmedText); // Trim the content to the word limit
                        wordCountDisplay.textContent = "Words: " + limit + "/" + limit;
                    } else {
                        isLimitExceeded = false;
                    }

                    // Adjust color based on word count
                    wordCountDisplay.style.color = wordCount >= limit * 0.8 ? '#ff4500' : '#008000';
                }

                targetEditor.on('keydown', function(e) {
                    if (isLimitExceeded && e.key !== 'Backspace' && e.key !== 'Delete') {
                        e.preventDefault(); // Prevent adding new text if the limit is exceeded
                    }
                });
                targetEditor.on('keyup', updateWordCount);
                targetEditor.on('NodeChange', updateWordCount);

                updateWordCount(); // Initial update
            }

            // Loop through each editor ID and apply the word limit functionality
            for (var i = 0; i < editorDataIds.length; i++) {
                setTimeout(function(dataId) {
                    applyWordLimitToEditor(dataId);
                }.bind(null, editorDataIds[i]), 1000); // Delay to ensure TinyMCE editors are initialized
            }
        });
    </script>
    <?php
}

add_action('wp_footer', 'add_custom_word_limit_for_wp_editor_text_count_limit', 101);