
<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>
<script src="tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
selector: '#editor_one',

plugins: 'image fullscreen source advsource advlink table link emoticons code codesample media preview importcss autoresize textcolor loremipsum accordion insertdatetime help',

file_picker_callback : mceElf.browser,
images_upload_handler: mceElf.uploadHandler,

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 | preview', 
toolbar3: 'styleselect blockquote | print | loremipsum | image | media | table | accordion | insertdatetime | help',

details_initial_state: 'collapsed',

font_css: '../assets/css/fonts.css',

default_link_target: '_blank',
promotion: false,
min_height: 600,

init_instance_callback: function (editor) {
$(editor.getContainer()).find('button.tox-statusbar__wordcount').click(); //convert wordcount to character count
},

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'; }
});
},
}); // Close editor_one


tinymce.init({
selector: '#editor_two',

plugins: 'image fullscreen source advsource advlink table link emoticons code codesample media preview importcss autoresize textcolor loremipsum accordion insertdatetime help',

file_picker_callback : mceElf.browser,
images_upload_handler: mceElf.uploadHandler,

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 | preview', 
toolbar3: 'styleselect blockquote | print | loremipsum | image | media | table | accordion | insertdatetime | help',

details_initial_state: 'collapsed',

font_css: '../assets/css/fonts.css',

default_link_target: '_blank',
promotion: false,
min_height: 600,

init_instance_callback: function (editor) {
$(editor.getContainer()).find('button.tox-statusbar__wordcount').click(); //convert wordcount to character count
},

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

}); // Close editor_two
</script>