File Structure: index.php seteditor.php media -- .trash js -- eltheme-jquery-ui.min.css -- jquery.min.js -- jquery-ui.min.js -- elfinder.min.js -- tinymceElfinder.js Download Scripts 269Kb tinymce

I had a need to limit the number of characters that someone can enter into the editor while I was designing the Social Sharing module for HomePage CMS. I wanted to be able to set the limit so people wouldn't just put a lot of senseless text in their Bio and Interest fields. After a lot of searching and a lot of trial and error I finally came up with this solution. In this tutorial we are going to add TinyMCE 7 and elFinder to the build and add the ability to upload images. We are also going to change the word count to character count and limit the number of characters that can be entered. I am assuming that you have already downloaded TinyMCE 7 and elFinder 2.1.65 If you download the Source .zip at the end of the tutorial they are included and that is the best way to get up and running. Quick Start - Download the source.zip file and unpack it onto your server. Point your browser to the folder and it will run out of the box. Getting Started: Create the media folder and open it. Inside create the folder .trash (be sure to add the . ) Download the .js files.

Create a new file and name it seteditor.php
Copy/paste the following into it.

Copy

<link rel="stylesheet" href="js/eltheme-jquery-ui.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css"/> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="elFinder/js/elfinder.min.js"></script> <script src="js/tinymceElfinder.js"></script> <script> const mceElf = new tinymceElfinder({ url: 'elFinder/php/connector.minimal.php', uploadTargetHash: 'l1_lw', nodeId: 'elfinder' }); </script>

Copy/paste the following just below the last </script>.
We are naming the selector editor_one. This can be changed to anything else.
We also added plugins to the menubar and toolbars.

Copy

<script> tinymce.init({ selector : '#editor_one', plugins: 'image fullscreen source advsource advlink table link emoticons code codesample media preview wordcount importcss autoresize textcolor loremipsum', menubar: 'file edit view insert format tools table help', toolbar1: 'cut copy code | undo redo | alignleft aligncenter alignright alignjustify outdent indent | fullscreen', toolbar2: 'link | hr | emoticons | fontsize fontfamily | bold italic underline strikethrough | forecolor backcolor', toolbar3: 'preview | styleselect blockquote | print | loremipsum | image | media | table', images_upload_url : 'upload.php', // Handles image uploading. automatic_uploads : false, // Do not allow auto uploading. promotion: false, // Turn off the "Upgrade" notice for TinyMCE. }); </script>

Now lets change word count to character count.
Copy/paste the following just below promotion: false,

Copy

init_instance_callback: function (editor) { $(editor.getContainer()).find('button.tox-statusbar__wordcount').click(); },

The next step adds character handling, counting, and limiting features.
Copy/paste just below word count to character count.

Copy

setup: function(ed) { var elem = $(ed.getContainer()); //tinymce container var id = this.id; // the id of the html textarea var limit = parseInt($("#" + (id)).attr("maxlength")); /* concat id with text for name of display div (for multiple tinymce on same page) */ var divid = id+'_countdown'; var findDiv = document.getElementById(divid); //default value findDiv.textContent = 'You have used 0 characters of '+limit+' allowed'; ed.on('keyup', function(e) { /* we use format:text to count just the text and not the html tags for proper length */ var tlength = tinymce.activeEditor.getContent({format:"text"}).length; /* we get the plain text value to use in the truncate below */ var ttext = tinymce.activeEditor.getContent({format:"text"}); var truncated_text = ttext.substring(0, limit); if(tlength > limit) { /* truncate the text */ tinymce.activeEditor.setContent(truncated_text); findDiv.textContent = 'You have used all allowed characters'; alert('You have used all allowed characters'); e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); return false; } else { findDiv.textContent = 'You have used '+tlength+' characters of '+limit+' allowed'; } }); },

index.php
The final step adds the editor to the build. Create a file and name it index.php.
Copy/paste the following.
In the <textarea set maxlength="" to the number of characters allowed in the editor.
Make sure that the selector, id, and the id in the <div are the same. In our case it is editor_one.
And in the <div that the id is followed with _countdown (editor_one_countdown).

Copy

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <title></title> <?php require_once 'seteditor.php'; ?> </head> <body> <textarea maxlength="35" id="editor_one">The character count is set to 35.</textarea> <div id="editor_one_countdown"></div> </div> </body> </html>

 

Notice that the character count is 0,
place your cursor after the 35. in the editor and press the space bar to register the characters that are in the editor now.
Continue pressing the space bar to see the popup notice.

The character count is set to 35.

Download Source 2.42Mb

Download Tutorial 3.1Kb

Download Scripts 269Kb