51

Re: Limit the Number of characters entered in the editor

Thanks Felix!  I finally found the answer!  It turns out that mssql.textsize & mssqp.textlimit in the php.ini file were left at their default of 4096.  Thus, php itself was truncating the fields...  <sigh>

- O8

52

Re: Limit the Number of characters entered in the editor

is there any work around on this problem?
i can pass parameters to onchange_callback but i cant pass parameters in handle_event_callback. i also tried textarea's keyup and down but still no luck.

heres my code:

function limitText(inst, limitField, limitCount, limitNum) {
    alert("Some one modified something");
    alert("The HTML is now:" + inst.getBody().innerHTML);
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        limitCount.value = limitNum - limitField.value.length;
    }
}


function myHandleEvent(e) {
    //alert("event:" + e.type);

    return true; // Continue handling
}



tinyMCE.init({
    // General options
    mode : "exact",
    elements : "services,companyprofile,limitedtextarea",
    extended_valid_elements : "textarea[onKeyDown|onKeyUp|cols|rows]",
    theme : "advanced",
    onchange_callback : "limitText",
    force_br_newlines : true,
    handle_event_callback : "myHandleEvent",
    forced_root_block : '',

    plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",

    // Theme options
    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|charmap,emotions,iespell,media,advhr",
    theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,code,|,preview,|,forecolor,backcolor",
    
    //theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    //theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : false,

    // Example content CSS (should be your site CSS)
    content_css : "editor/css/example.css",

    // Drop lists for link/image/media/template dialogs
    template_external_list_url : "editor/js/template_list.js",
    external_link_list_url : "editor/js/link_list.js",
    external_image_list_url : "editor/js/image_list.js",
    media_external_list_url : "editor/js/media_list.js",

    // Replace values for the template plugin
    template_replace_values : {
        username : "Some User",
        staffid : "991234"
    }
});


/// html code -----

 <textarea name="companyprofile" onKeyDown="limitText(this.form.limitedtextarea,this.form.countdown,100);" 
onKeyUp="limitText(this.form.limitedtextarea,this.form.countdown,100);"><?=$companyprofile?></textarea><br>
<font size="1">(Maximum characters: 100)<br>
You have <input readonly type="text" name="countdown" size="3" value="100"> characters left.</font>

limitText function works but the counter / countdown wont work. Can anyone help me on this thanks
It would be cool to have a max and min character option..

53

Re: Limit the Number of characters entered in the editor

Felix Riesterer wrote:
carsten888 wrote:

How do I get the restrictions to only kick in with one specific editor?

You'll need a second init for it. Example 04: Multiple inits. I'd suggest you initialize "introtext" with "mode:exact".

mmmm, can't do that in Joomla.

Last edited by carsten888 (2009-05-04 12:36:54)

54

Re: Limit the Number of characters entered in the editor

<h2>IT WORK !! YEAHHHHH ; truely this one WORK !!!!! dynamicly !!! with multiple TinyMceEditor !!!!</h2>

Hello for the 2nd time TinyMCE forum reader,

-(RAW TEXT length + (converted HTML iso char; exemple ö === ö) + HTML code length) === Happy function
-paste[Ctrl+V]
-word past
-text insert
-etc
-no try with image content (but this is finally html code ;-) )

... and don't forget:
ö = 1 char
ö = 6 char

after my First POST :
max length for 1 TinyEditor
here my second POST:
max length for multiple TinyEditor Instance

NOTE:
Be carefull by debug with turn on the javascript alert(''); box because if you turn on the alert('') by the onKeyDown then the "onKeyUp" don't will run but this last one is essential!

Scincerly Stéphane
{thx for feedback}

#############################
###
### The javascript_code.js file
###
#############################

/*
trunk text if the length of the 'limitField' > 'limitNum')
How to use:
onKeyUp=limitText(this,1048)
*/
function limitText(limitField, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    }
}

function verifyEditorMaxLength(EditorMaxLength) {
  tinyMCE.triggerSave();
    alert(EditorMaxLength);
    alert(EditorMaxLength.value);
  /*if (EditorMaxLength.content.value.length > 2) {
    alert("HEY to much content!!");
    return false;
  }
*/
  return true;
}

function myMaxLength_1024(){
    // variable declaration; You must change this value for your use.
    /*
    !! ATTENTION !!
    in purpose to not lose the HTML balise in the 'TinyMCE Editor' (like: <p></p>)
    this value will be used to save the visible char AND the HTML balise
    that mean :
        var mytext = '<p>123</p>';
        alert(mytext.length);
        //10
    */
    return 1000; //Maxlength
    /*
    Post Scriptum:
    You can use the 'replace' function (thanks to lorenzocampanis at users.sourceforge.net)if you want to count ONLY visible char
    that mean :
        var mytext = '<p>123</p>';
        alert(mytext.length.replace(/<\/?[^>]+(>|$)/g, ""));
        //3
    */
};
           
function the_HTML_id_Of_My_TextArea(){
    //variable declaration; You must change this value for your use
    return 'myTinyEditor';
};


#############################
###
### The main HTML file
###
#############################
<html>
    <head>
        <!--
        * Firm        : http://www.fiveinfo.ch
        * Author        : Stéphane Lauper
        * Email        : slauper at fiveinfo dot ch
        * Date        : 10.October.2008
        *
        * Objective : with InternetExplorer (endUser wish)
        * MaxLength solution for the TinyMCE Editor with target to write in Database
        * without HTML formatting loss and without Database field size Overflow.
        * NOTE:
        * Be carefull by debug with turn on the javascript alert(''); box because if you turn on the alert('') by the onKeyDown then the "onKeyUp" don't will run but this last one is essential!
        -->
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <script src="javascript_code.js"></script>
        <!-- TinyMCE -->
        <script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
        <script type="text/javascript">
       
            tinyMCE.init({ // Start declare one of the TinyEditor instance
                // General options
                mode : "textareas",
                theme : "advanced",
                editor_selector : "myTinyEditorDE",
                plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups",
               
                // Theme options
                theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect,hr,|,print,|,fullscreen",
                theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,insertdate,inserttime,preview,|,forecolor,backcolor",
                theme_advanced_buttons3 : "",
                theme_advanced_toolbar_location : "top",
                theme_advanced_toolbar_align : "left",
                theme_advanced_statusbar_location : "",
                theme_advanced_resizing : true,
                setup : function(ed) {
                        ed.onKeyDown.add(
                            function(ed, e) {
                                //change this var it must be the same name as the above "editor_selector" property
                                //AND in the HTML <text area> following properties must be equal set as the above "editor_selector" property:
                                //    <TEXTAREA NAME="myTinyEditorDE" ID="myTinyEditorDE" CLASS="myTinyEditorDE" ></TEXTAREA>
                                var the_HTML_id_Of_My_TextArea = "myTinyEditorDE";
                                //variable declaration; No change needed.
                                var CantWriteMoreThan = myMaxLength_1024();/* if you want to change the 'Max number of char allowed' you can change this value in a unique location. See the above myMaxLength() function. */
                                var Authorized_theTextAreaContent = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent();    //is the 'undo-text'
                                var theTextAreaContent = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent(); //Content of the TextArea
                                var theTextAreaContentLength = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent().length; //Length of the Content of the TextArea
                                //alert('OnKeyDown Event CantWriteMoreThan: '+ CantWriteMoreThan);
                                //alert('OnKeyDown Event theTextAreaContent: '+ theTextAreaContent);
                                //alert('OnKeyDown Event theTextAreaContentLength: '+ theTextAreaContentLength);
                                //alert('OnKeyDown Event document.getElementById(UndoText).value: '+ document.getElementById('UndoText').value);
                                //alert('10');
                                if(theTextAreaContentLength > CantWriteMoreThan){
                                //alert('1a');
                                    //Set the 'TinyMCE Editor' Editor with the value got from the 'HTML hidden input'.
                                    tinyMCE.get(the_HTML_id_Of_My_TextArea).setContent(document.getElementById('UndoText').value);
                                }//end if
                                if (theTextAreaContentLength <= CantWriteMoreThan){
                                //alert('1b');
                                    //Set 'HTML hidden input' with the value got from the 'TinyMCE Editor'.
                                    document.getElementById('UndoText').value = Authorized_theTextAreaContent;
                                //alert('OnKeyDown Event NEW document.getElementById(UndoText).value: '+ document.getElementById('UndoText').value);
                                }//endif
                            }//end function(ed,e)
                        );//end ed.onKeyDown.add
                       
                        ed.onChange.add(function(ed, e) {
                                //change this var it must be the same name as the above "editor_selector" property
                                //AND in the HTML <text area> following properties must be equal set as the above "editor_selector" property:
                                //    <TEXTAREA NAME="myTinyEditorDE" ID="myTinyEditorDE" CLASS="myTinyEditorDE" ></TEXTAREA>
                                var the_HTML_id_Of_My_TextArea = "myTinyEditorDE";
                                //variable declaration; No change needed.
                                var CantWriteMoreThan = myMaxLength_1024();/* if you want to change the 'Max number of char allowed' you can change this value in a unique location. See the above myMaxLength() function. */
                                var Authorized_theTextAreaContent = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent();    //is the 'undo-text'
                                var theTextAreaContent = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent(); //Content of the TextArea
                                var theTextAreaContentLength = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent().length; //Length of the Content of the TextArea
                                //alert('OnChange Event CantWriteMoreThan: '+ CantWriteMoreThan);
                                //alert('OnChange Event theTextAreaContent: '+ theTextAreaContent);
                                //alert('OnChange Event theTextAreaContentLength: '+ theTextAreaContentLength);
                                //alert('20');
                                if (theTextAreaContentLength <= CantWriteMoreThan){
                                //alert('2a');
                                    //Set 'HTML hidden input' with the value got from the 'TinyMCE Editor'.
                                    document.getElementById('UndoText').value = Authorized_theTextAreaContent;
                                }//endif
                                if(theTextAreaContentLength > CantWriteMoreThan){
                                //alert('2b');
                                    //Set the 'TinyMCE Editor' Editor with the value got from the 'HTML hidden input'.
                                    tinyMCE.get(the_HTML_id_Of_My_TextArea).setContent(document.getElementById('UndoText').value);
                                }//end if
                            }//end function(ed,e)
                        );//end ed.onChange.add
                       
                        ed.onKeyUp.add(function(ed, e) {
                                //change this var it must be the same name as the above "editor_selector" property
                                //AND in the HTML <text area> following properties must be equal set as the above "editor_selector" property:
                                //    <TEXTAREA NAME="myTinyEditorDE" ID="myTinyEditorDE" CLASS="myTinyEditorDE" ></TEXTAREA>
                                var the_HTML_id_Of_My_TextArea = "myTinyEditorDE";
                                //variable declaration; No change needed.
                                var CantWriteMoreThan = myMaxLength_1024();/* if you want to change the 'Max number of char allowed' you can change this value in a unique location. See the above myMaxLength() function. */
                                var Authorized_theTextAreaContent = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent();    //is the 'undo-text'
                                var theTextAreaContent = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent(); //Content of the TextArea
                                var theTextAreaContentLength = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent().length; //Length of the Content of the TextArea
                                //alert('OnKeyUp Event : CantWriteMoreThan'+ CantWriteMoreThan);
                                //alert('OnKeyUp Event : theTextAreaContent'+ theTextAreaContent);
                                //alert('OnKeyUp Event : theTextAreaContentLength'+ theTextAreaContentLength);
                                //alert('30');
                                if (theTextAreaContentLength <= CantWriteMoreThan){
                                //alert('3a');
                                    //Set 'HTML hidden input' with the value got from the 'TinyMCE Editor'.
                                    document.getElementById('UndoText').value = Authorized_theTextAreaContent;
                                }//endif
                                if(theTextAreaContentLength > CantWriteMoreThan){
                                //alert('3b');
                                    //Set the 'TinyMCE Editor' Editor with the value got from the 'HTML hidden input'.
                                    tinyMCE.get(the_HTML_id_Of_My_TextArea).setContent(document.getElementById('UndoText').value);
                                }//end if
                            }//end function(ed,e)
                        );//end ed.onKeyUp.add
                   },//end setup : function(ed)
                  
                // Example word content CSS (should be your site CSS) this one removes paragraph margins
                content_css : "css/word.css",

                // Drop lists for link/image/media/template dialogs
                template_external_list_url : "lists/template_list.js",
                external_link_list_url : "lists/link_list.js",
                external_image_list_url : "lists/image_list.js",
                media_external_list_url : "lists/media_list.js",

                // Replace values for the template plugin
                template_replace_values : {
                    username : "Some User",
                    staffid : "991234"
                }
            });// end declare one of the TinyEditor instance
                  
                  tinyMCE.init({ // Start declare one of the TinyEditor instance
                // General options
                mode : "textareas",
                theme : "advanced",
                editor_selector : "myTinyEditorFR",
                plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups",
               
                // Theme options
                theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect,hr,|,print,|,fullscreen",
                theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,insertdate,inserttime,preview,|,forecolor,backcolor",
                theme_advanced_buttons3 : "",
                theme_advanced_toolbar_location : "top",
                theme_advanced_toolbar_align : "left",
                theme_advanced_statusbar_location : "",
                theme_advanced_resizing : true,
                setup : function(ed) {
                        ed.onKeyDown.add(
                            function(ed, e) {
                                //change this var it must be the same name as the above "editor_selector" property
                                //AND in the HTML <text area> following properties must be equal set as the above "editor_selector" property:
                                //    <TEXTAREA NAME="myTinyEditorFR" ID="myTinyEditorFR" CLASS="myTinyEditorFR" ></TEXTAREA>
                                var the_HTML_id_Of_My_TextArea = "myTinyEditorFR";
                                //variable declaration; No change needed.
                                var CantWriteMoreThan = myMaxLength_1024();/* if you want to change the 'Max number of char allowed' you can change this value in a unique location. See the above myMaxLength() function. */
                                var Authorized_theTextAreaContent = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent();    //is the 'undo-text'
                                var theTextAreaContent = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent(); //Content of the TextArea
                                var theTextAreaContentLength = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent().length; //Length of the Content of the TextArea
                                //alert('OnKeyDown Event CantWriteMoreThan: '+ CantWriteMoreThan);
                                //alert('OnKeyDown Event theTextAreaContent: '+ theTextAreaContent);
                                //alert('OnKeyDown Event theTextAreaContentLength: '+ theTextAreaContentLength);
                                //alert('OnKeyDown Event document.getElementById(UndoText).value: '+ document.getElementById('UndoText').value);
                                //alert('10');
                                if(theTextAreaContentLength > CantWriteMoreThan){
                                //alert('1a');
                                    //Set the 'TinyMCE Editor' Editor with the value got from the 'HTML hidden input'.
                                    tinyMCE.get(the_HTML_id_Of_My_TextArea).setContent(document.getElementById('UndoText').value);
                                }//end if
                                if (theTextAreaContentLength <= CantWriteMoreThan){
                                //alert('1b');
                                    //Set 'HTML hidden input' with the value got from the 'TinyMCE Editor'.
                                    document.getElementById('UndoText').value = Authorized_theTextAreaContent;
                                //alert('OnKeyDown Event NEW document.getElementById(UndoText).value: '+ document.getElementById('UndoText').value);
                                }//endif
                            }//end function(ed,e)
                        );//end ed.onKeyDown.add
                       
                        ed.onChange.add(function(ed, e) {
                                //change this var it must be the same name as the above "editor_selector" property
                                //AND in the HTML <text area> following properties must be equal set as the above "editor_selector" property:
                                //    <TEXTAREA NAME="myTinyEditorFR" ID="myTinyEditorFR" CLASS="myTinyEditorFR" ></TEXTAREA>
                                var the_HTML_id_Of_My_TextArea = "myTinyEditorFR";
                                //variable declaration; No change needed.
                                var CantWriteMoreThan = myMaxLength_1024();/* if you want to change the 'Max number of char allowed' you can change this value in a unique location. See the above myMaxLength() function. */
                                var Authorized_theTextAreaContent = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent();    //is the 'undo-text'
                                var theTextAreaContent = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent(); //Content of the TextArea
                                var theTextAreaContentLength = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent().length; //Length of the Content of the TextArea
                                //alert('OnChange Event CantWriteMoreThan: '+ CantWriteMoreThan);
                                //alert('OnChange Event theTextAreaContent: '+ theTextAreaContent);
                                //alert('OnChange Event theTextAreaContentLength: '+ theTextAreaContentLength);
                                //alert('20');
                                if (theTextAreaContentLength <= CantWriteMoreThan){
                                //alert('2a');
                                    //Set 'HTML hidden input' with the value got from the 'TinyMCE Editor'.
                                    document.getElementById('UndoText').value = Authorized_theTextAreaContent;
                                }//endif
                                if(theTextAreaContentLength > CantWriteMoreThan){
                                //alert('2b');
                                    //Set the 'TinyMCE Editor' Editor with the value got from the 'HTML hidden input'.
                                    tinyMCE.get(the_HTML_id_Of_My_TextArea).setContent(document.getElementById('UndoText').value);
                                }//end if
                            }//end function(ed,e)
                        );//end ed.onChange.add
                       
                        ed.onKeyUp.add(function(ed, e) {
                                //change this var it must be the same name as the above "editor_selector" property
                                //AND in the HTML <text area> following properties must be equal set as the above "editor_selector" property:
                                //    <TEXTAREA NAME="myTinyEditorFR" ID="myTinyEditorFR" CLASS="myTinyEditorFR" ></TEXTAREA>
                                var the_HTML_id_Of_My_TextArea = "myTinyEditorFR";
                                //variable declaration; No change needed.
                                var CantWriteMoreThan = myMaxLength_1024();/* if you want to change the 'Max number of char allowed' you can change this value in a unique location. See the above myMaxLength() function. */
                                var Authorized_theTextAreaContent = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent();    //is the 'undo-text'
                                var theTextAreaContent = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent(); //Content of the TextArea
                                var theTextAreaContentLength = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent().length; //Length of the Content of the TextArea
                                //alert('OnKeyUp Event : CantWriteMoreThan'+ CantWriteMoreThan);
                                //alert('OnKeyUp Event : theTextAreaContent'+ theTextAreaContent);
                                //alert('OnKeyUp Event : theTextAreaContentLength'+ theTextAreaContentLength);
                                //alert('30');
                                if (theTextAreaContentLength <= CantWriteMoreThan){
                                //alert('3a');
                                    //Set 'HTML hidden input' with the value got from the 'TinyMCE Editor'.
                                    document.getElementById('UndoText').value = Authorized_theTextAreaContent;
                                }//endif
                                if(theTextAreaContentLength > CantWriteMoreThan){
                                //alert('3b');
                                    //Set the 'TinyMCE Editor' Editor with the value got from the 'HTML hidden input'.
                                    tinyMCE.get(the_HTML_id_Of_My_TextArea).setContent(document.getElementById('UndoText').value);
                                }//end if
                            }//end function(ed,e)
                        );//end ed.onKeyUp.add
                   },//end setup : function(ed)
                  
                // Example word content CSS (should be your site CSS) this one removes paragraph margins
                content_css : "css/word.css",

                // Drop lists for link/image/media/template dialogs
                template_external_list_url : "lists/template_list.js",
                external_link_list_url : "lists/link_list.js",
                external_image_list_url : "lists/image_list.js",
                media_external_list_url : "lists/media_list.js",

                // Replace values for the template plugin
                template_replace_values : {
                    username : "Some User",
                    staffid : "991234"
                }
            });// end declare one of the TinyEditor instance
           
            tinyMCE.init({ // Start declare one of the TinyEditor instance
                // General options
                mode : "textareas",
                theme : "advanced",
                editor_selector : "myTinyEditorIT",
                plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups",
               
                // Theme options
                theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect,hr,|,print,|,fullscreen",
                theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,insertdate,inserttime,preview,|,forecolor,backcolor",
                theme_advanced_buttons3 : "",
                theme_advanced_toolbar_location : "top",
                theme_advanced_toolbar_align : "left",
                theme_advanced_statusbar_location : "",
                theme_advanced_resizing : true,
                setup : function(ed) {
                        ed.onKeyDown.add(
                            function(ed, e) {
                                //change this var it must be the same name as the above "editor_selector" property
                                //AND in the HTML <text area> following properties must be equal set as the above "editor_selector" property:
                                //    <TEXTAREA NAME="myTinyEditorIT" ID="myTinyEditorIT" CLASS="myTinyEditorIT" ></TEXTAREA>
                                var the_HTML_id_Of_My_TextArea = "myTinyEditorIT";
                                //variable declaration; No change needed.
                                var CantWriteMoreThan = myMaxLength_1024();/* if you want to change the 'Max number of char allowed' you can change this value in a unique location. See the above myMaxLength() function. */
                                var Authorized_theTextAreaContent = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent();    //is the 'undo-text'
                                var theTextAreaContent = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent(); //Content of the TextArea
                                var theTextAreaContentLength = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent().length; //Length of the Content of the TextArea
                                //alert('OnKeyDown Event CantWriteMoreThan: '+ CantWriteMoreThan);
                                //alert('OnKeyDown Event theTextAreaContent: '+ theTextAreaContent);
                                //alert('OnKeyDown Event theTextAreaContentLength: '+ theTextAreaContentLength);
                                //alert('OnKeyDown Event document.getElementById(UndoText).value: '+ document.getElementById('UndoText').value);
                                //alert('10');
                                if(theTextAreaContentLength > CantWriteMoreThan){
                                //alert('1a');
                                    //Set the 'TinyMCE Editor' Editor with the value got from the 'HTML hidden input'.
                                    tinyMCE.get(the_HTML_id_Of_My_TextArea).setContent(document.getElementById('UndoText').value);
                                }//end if
                                if (theTextAreaContentLength <= CantWriteMoreThan){
                                //alert('1b');
                                    //Set 'HTML hidden input' with the value got from the 'TinyMCE Editor'.
                                    document.getElementById('UndoText').value = Authorized_theTextAreaContent;
                                //alert('OnKeyDown Event NEW document.getElementById(UndoText).value: '+ document.getElementById('UndoText').value);
                                }//endif
                            }//end function(ed,e)
                        );//end ed.onKeyDown.add
                       
                        ed.onChange.add(function(ed, e) {
                                //change this var it must be the same name as the above "editor_selector" property
                                //AND in the HTML <text area> following properties must be equal set as the above "editor_selector" property:
                                //    <TEXTAREA NAME="myTinyEditorIT" ID="myTinyEditorIT" CLASS="myTinyEditorIT" ></TEXTAREA>
                                var the_HTML_id_Of_My_TextArea = "myTinyEditorIT";
                                //variable declaration; No change needed.
                                var CantWriteMoreThan = myMaxLength_1024();/* if you want to change the 'Max number of char allowed' you can change this value in a unique location. See the above myMaxLength() function. */
                                var Authorized_theTextAreaContent = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent();    //is the 'undo-text'
                                var theTextAreaContent = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent(); //Content of the TextArea
                                var theTextAreaContentLength = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent().length; //Length of the Content of the TextArea
                                //alert('OnChange Event CantWriteMoreThan: '+ CantWriteMoreThan);
                                //alert('OnChange Event theTextAreaContent: '+ theTextAreaContent);
                                //alert('OnChange Event theTextAreaContentLength: '+ theTextAreaContentLength);
                                //alert('20');
                                if (theTextAreaContentLength <= CantWriteMoreThan){
                                //alert('2a');
                                    //Set 'HTML hidden input' with the value got from the 'TinyMCE Editor'.
                                    document.getElementById('UndoText').value = Authorized_theTextAreaContent;
                                }//endif
                                if(theTextAreaContentLength > CantWriteMoreThan){
                                //alert('2b');
                                    //Set the 'TinyMCE Editor' Editor with the value got from the 'HTML hidden input'.
                                    tinyMCE.get(the_HTML_id_Of_My_TextArea).setContent(document.getElementById('UndoText').value);
                                }//end if
                            }//end function(ed,e)
                        );//end ed.onChange.add
                       
                        ed.onKeyUp.add(function(ed, e) {
                                //change this var it must be the same name as the above "editor_selector" property
                                //AND in the HTML <text area> following properties must be equal set as the above "editor_selector" property:
                                //    <TEXTAREA NAME="myTinyEditorIT" ID="myTinyEditorIT" CLASS="myTinyEditorIT" ></TEXTAREA>
                                var the_HTML_id_Of_My_TextArea = "myTinyEditorIT";
                                //variable declaration; No change needed.
                                var CantWriteMoreThan = myMaxLength_1024();/* if you want to change the 'Max number of char allowed' you can change this value in a unique location. See the above myMaxLength() function. */
                                var Authorized_theTextAreaContent = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent();    //is the 'undo-text'
                                var theTextAreaContent = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent(); //Content of the TextArea
                                var theTextAreaContentLength = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent().length; //Length of the Content of the TextArea
                                //alert('OnKeyUp Event : CantWriteMoreThan'+ CantWriteMoreThan);
                                //alert('OnKeyUp Event : theTextAreaContent'+ theTextAreaContent);
                                //alert('OnKeyUp Event : theTextAreaContentLength'+ theTextAreaContentLength);
                                //alert('30');
                                if (theTextAreaContentLength <= CantWriteMoreThan){
                                //alert('3a');
                                    //Set 'HTML hidden input' with the value got from the 'TinyMCE Editor'.
                                    document.getElementById('UndoText').value = Authorized_theTextAreaContent;
                                }//endif
                                if(theTextAreaContentLength > CantWriteMoreThan){
                                //alert('3b');
                                    //Set the 'TinyMCE Editor' Editor with the value got from the 'HTML hidden input'.
                                    tinyMCE.get(the_HTML_id_Of_My_TextArea).setContent(document.getElementById('UndoText').value);
                                }//end if
                            }//end function(ed,e)
                        );//end ed.onKeyUp.add
                   },//end setup : function(ed)
                  
                // Example word content CSS (should be your site CSS) this one removes paragraph margins
                content_css : "css/word.css",

                // Drop lists for link/image/media/template dialogs
                template_external_list_url : "lists/template_list.js",
                external_link_list_url : "lists/link_list.js",
                external_image_list_url : "lists/image_list.js",
                media_external_list_url : "lists/media_list.js",

                // Replace values for the template plugin
                template_replace_values : {
                    username : "Some User",
                    staffid : "991234"
                }
            });// end declare one of the TinyEditor instance
           
            tinyMCE.init({ // Start declare one of the TinyEditor instance
                // General options
                mode : "textareas",
                theme : "advanced",
                editor_selector : "myTinyEditorEN",
                plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups",
               
                // Theme options
                theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect,hr,|,print,|,fullscreen",
                theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,insertdate,inserttime,preview,|,forecolor,backcolor",
                theme_advanced_buttons3 : "",
                theme_advanced_toolbar_location : "top",
                theme_advanced_toolbar_align : "left",
                theme_advanced_statusbar_location : "",
                theme_advanced_resizing : true,
                setup : function(ed) {
                        ed.onKeyDown.add(
                            function(ed, e) {
                                //change this var it must be the same name as the above "editor_selector" property
                                //AND in the HTML <text area> following properties must be equal set as the above "editor_selector" property:
                                //    <TEXTAREA NAME="myTinyEditorEN" ID="myTinyEditorEN" CLASS="myTinyEditorEN" ></TEXTAREA>
                                var the_HTML_id_Of_My_TextArea = "myTinyEditorEN";
                                //variable declaration; No change needed.
                                var CantWriteMoreThan = myMaxLength_1024();/* if you want to change the 'Max number of char allowed' you can change this value in a unique location. See the above myMaxLength() function. */
                                var Authorized_theTextAreaContent = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent();    //is the 'undo-text'
                                var theTextAreaContent = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent(); //Content of the TextArea
                                var theTextAreaContentLength = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent().length; //Length of the Content of the TextArea
                                //alert('OnKeyDown Event CantWriteMoreThan: '+ CantWriteMoreThan);
                                //alert('OnKeyDown Event theTextAreaContent: '+ theTextAreaContent);
                                //alert('OnKeyDown Event theTextAreaContentLength: '+ theTextAreaContentLength);
                                //alert('OnKeyDown Event document.getElementById(UndoText).value: '+ document.getElementById('UndoText').value);
                                //alert('10');
                                if(theTextAreaContentLength > CantWriteMoreThan){
                                //alert('1a');
                                    //Set the 'TinyMCE Editor' Editor with the value got from the 'HTML hidden input'.
                                    tinyMCE.get(the_HTML_id_Of_My_TextArea).setContent(document.getElementById('UndoText').value);
                                }//end if
                                if (theTextAreaContentLength <= CantWriteMoreThan){
                                //alert('1b');
                                    //Set 'HTML hidden input' with the value got from the 'TinyMCE Editor'.
                                    document.getElementById('UndoText').value = Authorized_theTextAreaContent;
                                //alert('OnKeyDown Event NEW document.getElementById(UndoText).value: '+ document.getElementById('UndoText').value);
                                }//endif
                            }//end function(ed,e)
                        );//end ed.onKeyDown.add
                       
                        ed.onChange.add(function(ed, e) {
                                //change this var it must be the same name as the above "editor_selector" property
                                //AND in the HTML <text area> following properties must be equal set as the above "editor_selector" property:
                                //    <TEXTAREA NAME="myTinyEditorEN" ID="myTinyEditorEN" CLASS="myTinyEditorEN" ></TEXTAREA>
                                var the_HTML_id_Of_My_TextArea = "myTinyEditorEN";
                                //variable declaration; No change needed.
                                var CantWriteMoreThan = myMaxLength_1024();/* if you want to change the 'Max number of char allowed' you can change this value in a unique location. See the above myMaxLength() function. */
                                var Authorized_theTextAreaContent = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent();    //is the 'undo-text'
                                var theTextAreaContent = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent(); //Content of the TextArea
                                var theTextAreaContentLength = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent().length; //Length of the Content of the TextArea
                                //alert('OnChange Event CantWriteMoreThan: '+ CantWriteMoreThan);
                                //alert('OnChange Event theTextAreaContent: '+ theTextAreaContent);
                                //alert('OnChange Event theTextAreaContentLength: '+ theTextAreaContentLength);
                                //alert('20');
                                if (theTextAreaContentLength <= CantWriteMoreThan){
                                //alert('2a');
                                    //Set 'HTML hidden input' with the value got from the 'TinyMCE Editor'.
                                    document.getElementById('UndoText').value = Authorized_theTextAreaContent;
                                }//endif
                                if(theTextAreaContentLength > CantWriteMoreThan){
                                //alert('2b');
                                    //Set the 'TinyMCE Editor' Editor with the value got from the 'HTML hidden input'.
                                    tinyMCE.get(the_HTML_id_Of_My_TextArea).setContent(document.getElementById('UndoText').value);
                                }//end if
                            }//end function(ed,e)
                        );//end ed.onChange.add
                       
                        ed.onKeyUp.add(function(ed, e) {
                                //change this var it must be the same name as the above "editor_selector" property
                                //AND in the HTML <text area> following properties must be equal set as the above "editor_selector" property:
                                //    <TEXTAREA NAME="myTinyEditorEN" ID="myTinyEditorEN" CLASS="myTinyEditorEN" ></TEXTAREA>
                                var the_HTML_id_Of_My_TextArea = "myTinyEditorEN";
                                //variable declaration; No change needed.
                                var CantWriteMoreThan = myMaxLength_1024();/* if you want to change the 'Max number of char allowed' you can change this value in a unique location. See the above myMaxLength() function. */
                                var Authorized_theTextAreaContent = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent();    //is the 'undo-text'
                                var theTextAreaContent = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent(); //Content of the TextArea
                                var theTextAreaContentLength = tinyMCE.get(the_HTML_id_Of_My_TextArea).getContent().length; //Length of the Content of the TextArea
                                //alert('OnKeyUp Event : CantWriteMoreThan'+ CantWriteMoreThan);
                                //alert('OnKeyUp Event : theTextAreaContent'+ theTextAreaContent);
                                //alert('OnKeyUp Event : theTextAreaContentLength'+ theTextAreaContentLength);
                                //alert('30');
                                if (theTextAreaContentLength <= CantWriteMoreThan){
                                //alert('3a');
                                    //Set 'HTML hidden input' with the value got from the 'TinyMCE Editor'.
                                    document.getElementById('UndoText').value = Authorized_theTextAreaContent;
                                }//endif
                                if(theTextAreaContentLength > CantWriteMoreThan){
                                //alert('3b');
                                    //Set the 'TinyMCE Editor' Editor with the value got from the 'HTML hidden input'.
                                    tinyMCE.get(the_HTML_id_Of_My_TextArea).setContent(document.getElementById('UndoText').value);
                                }//end if
                            }//end function(ed,e)
                        );//end ed.onKeyUp.add
                   },//end setup : function(ed)
                  
                // Example word content CSS (should be your site CSS) this one removes paragraph margins
                content_css : "css/word.css",

                // Drop lists for link/image/media/template dialogs
                template_external_list_url : "lists/template_list.js",
                external_link_list_url : "lists/link_list.js",
                external_image_list_url : "lists/image_list.js",
                media_external_list_url : "lists/media_list.js",

                // Replace values for the template plugin
                template_replace_values : {
                    username : "Some User",
                    staffid : "991234"
                }
            });// end declare one of the TinyEditor instance
           
        </script>
<!-- /TinyMCE -->
    </head>

   
    <BODY>
        <FORM name="form1" method="post" action="">

            <!-- Do not delete this hidden input element. It is the 'undo' of the MaxLength -->
            <input type="hidden" name="UndoText"/>
            <!-- Do not delete this hidden input element. It is the 'undo' of the MaxLength -->

            <!-- Do not delete this element. This is My_TextArea for DE language(German)-->
            <textarea rows="15" id="myTinyEditorDE" name="myTinyEditorDE" class="myTinyEditorDE" tabindex="30" style="width: 600px" >DE</textarea>
            <!-- Do not delete this element. This is My_TextArea for DE language(German)-->

            <!-- Do not delete this element. This is My_TextArea for FR language(French)-->
            <textarea rows="15" id="myTinyEditorFR" name="myTinyEditorFR" class="myTinyEditorFR" tabindex="30" style="width: 600px" >FR</textarea>
            <!-- Do not delete this element. This is My_TextArea for FR language(French)-->

            <!-- Do not delete this element. This is My_TextArea for IT language(Italian)-->
            <textarea rows="15" id="myTinyEditorIT" name="myTinyEditorIT" class="myTinyEditorIT" tabindex="30" style="width: 600px" >IT</textarea>
            <!-- Do not delete this element. This is My_TextArea for IT language(Italian)-->

            <!-- Do not delete this element. This is My_TextArea for EN language(English)-->
            <textarea rows="15" id="myTinyEditorEN" name="myTinyEditorEN" class="myTinyEditorEN" tabindex="30" style="width: 600px" >EN</textarea>
            <!-- Do not delete this element. This is My_TextArea for EN language(English)-->
        </FORM>
    </BODY>
</html>

Last edited by slauper (2009-05-05 16:49:46)

55

Re: Limit the Number of characters entered in the editor

First time here.  Just want to say THANKS to the developers for a great tool.  I was first introduced to tinymce as it was included in a php script that I purchased.  It was an older version.  I have since implemented a new version in a script I built.

I have a bit of Javascript that I am using to limit characters in non-tinymce textareas.  I was wondering if there was a way to use this and have it address the textarea within tinymce.  I like the way it operates and the simplicity and brevity of the code.

And I've read all the comments from those of you who don't understand limiting the characters.  My reason is this.  I built and maintain a coupon site where business subscribers can create coupons for their business.  Naturally we don't want 4000 characters written into a coupon.  I am already doing the limiting server-side and am only concerned with characters that will be displayed on the site, not the characters of all the html.  We were getting complaints about having a hard time submitting a coupon and having a notice about too many characters and having to go back and forth until they get it right.  They wanted some kind of measure to know that they are in the limits.

Server side I am stripping the html and only counting the typed characters.  So I just need to do this client side so they will have at least a general indicator of where they are.

This script does two things.  It uses onKeyUp and counts down a number beside the textarea box.  It also quits typing when they have reached the limit. Here is the function called onKeyUp:

function limitC(obj,maxChar,ticker){

while(obj.value.length>maxChar){
obj.value=obj.value.replace(/.$/,'')
}
document.getElementById(ticker).innerHTML = maxChar - obj.value.length.toString();
}

So is there any way to transform this into something that will work for tinymce fields?

56

Re: Limit the Number of characters entered in the editor

OMG another "limit TinyMCE's max characters" question. Come on, this has been discussed to death here! Bottom line: It makes absolutely no sense! How do you want to "count out" the HTML code characters? And how does "limit" apply to these? So answer yourself these two simple question:

1.) Why would you need to limit the numbers of characters in the first place?

2.) What would you need WYSIWYG for?

I strongly feel that once again TinyMCE is misused for a purpose which it hasn't been made for. This happens quite a lot around here...

Greetings from Germany,

Felix Riesterer.
-- I am neither Moxiecode nor Ephox! --

57

Re: Limit the Number of characters entered in the editor

Yeah, if you use character limits for limiting visual presentation then your should not use our product at all. Why, since using a richtext editor enables you to change the visual representation of text height/width of characters and lines etc so there is no way to know how large the box will be rendered. In a plain text box you can probably predict fairly close how much visual space it will take up by counting the characters how ever it will never be perfects since most font's are not mono spaced and the kerning will produce different rersults for for example "www" is wider than "iii".

On the other hand if you need to limit the number of characters for other reasons for example that your backend has stupid limitations like varchar(255) or something you could simply before the user submits the form present then with a message that their HTML contents is to large and won't fit in the database. But I would never use such a dialog and present it to a user since most novice doesn't understand what HTML is or why they can't write more than 255 characters of code "not text". So I would instead use a text blob in the database and let the user type away.

Best regards,
Spocke - Main developer of TinyMCE

58

Re: Limit the Number of characters entered in the editor

Hi spocke,

I've made a new FAQ entry and linked to your answer here. Hope this reduces requests for this feature...

Greetings from Germany,

Felix Riesterer.
-- I am neither Moxiecode nor Ephox! --

59

Re: Limit the Number of characters entered in the editor

He he, German style. wink

There are some features that people want that we have avoided to do this is one of them, the other one is HTML forms never understood why someone would need that and the last one is the constant P vs BR debate. It's hard to educate the masses on these things.

Best regards,
Spocke - Main developer of TinyMCE

60

Re: Limit the Number of characters entered in the editor

Felix,
I explained in detail what I am doing and why.  Your comment suggests that you either didn't read my post, or that you are limited in your understanding of a wide range of applications.

I'm not wanting to count html characters.  Just the "typed" characters by the user.  And just for a visual reference for them.  I already explained that my limits are handled server side. 

I'm using tinymce to give some styling abilities to coupon posters.  But limits need to be in place to keep people from trying to put too much material into the coupon format.  If you must see to understand:
http://kirace.com/index.php?page=coupons

Naturally we can't have someone posting 4000 characters into a coupon.  It would be abusive of the application.

So if that doesn't further explain why, then I guess there is no hope for you understanding that someone may have other uses for something beyond your understanding. 

Spocke,
From the same link above you can see that I am not trying to make the boxes the same size.  I could force this by other means.  Just trying to give some general standards to keep content close.  I'm handling everything for my purposes server side.  The counter beside the tinymce textarea is at the request of users who just wanted a visual count to see when they were getting to the limit allowed.  Again ... I'm not counting html code.  Just typed characters.



So thanks for making me regret posting here.

61

Re: Limit the Number of characters entered in the editor

I understand the problem but you should still not use character counting for this. If I where you I would instead do a coupon preview next to the editor and let the user edit and see live how it will be presented/restricted by the borders of the coupon. You could also auto detect overflows and alert the user for it by measuring the contents inside the coupon container. This would be a much more rich and user friendly experience and more wysiwyg instead of writing in blind, getting an error you have to many characters even if you count them and only see 100 since the HTML code is 4000 characters.

Best regards,
Spocke - Main developer of TinyMCE

62

Re: Limit the Number of characters entered in the editor

In my original post I explained that I am not counting the html server side.  I am stripping the html before I count so that it will be a true keyed character count.

Thanks for the suggestion. I'll figure something out. I've already solved what made it difficult for some of them.  When the submitted, got the error and went back, some of the browsers wouldn't retain the data they had typed and they had to start over.  I have fixed that to where they can click a back link and it will re-populate all the fields just as they had entered.  They may have to just deal with it that way

63

Re: Limit the Number of characters entered in the editor

It doesn't matter the same problem applies regardless if it's content characters or source characters.

Best regards,
Spocke - Main developer of TinyMCE

64

Re: Limit the Number of characters entered in the editor

spocke wrote:

He he, German style. wink

Hey, what's this supposed to mean? smile

@astonishedman:

Spocke already pointed out a more sensible WYSIWYG approach. Real WYSIWYG would include a live preview (as is the meaning behind WYSIWYG). So either your editor is small enough to show the coupon in its later dimensions or you need a simple textarea (maybe with BBCode) which gets read out periodically to then show a preview in an extra <div> or something.

If you really must have TinyMCE (or any other WYSIWYG JavaScript RTE control) as the tool of choice then I strongly suggest you disable the vertical scrollbar of the editor's <iframe> element (CSS can do that with overflow:hidden) so the user already gets a feeling for what won't be visible after the coupon gets submitted.

I'd do the very same on the final page. From what I saw following your link the coupons do vary in size. My solution would force all coupons to be of equal size. And if the contents overflow the available space my CSS would simply cut them off.

Greetings from Germany,

Felix Riesterer.
-- I am neither Moxiecode nor Ephox! --

65

Re: Limit the Number of characters entered in the editor

Yeah, that was an option that I had already considered at development.  We decided that it was okay for them to vary in size some and didn't want to take the hidden overflow approach.  You have the potential of some strange results going that route, but the coupons would be the same size no matter what.  Just not what we wanted.

Thanks for the attempts at an education.

66

Re: Limit the Number of characters entered in the editor

Hi, I'm using a slightly modified version of Jungers42's code. I'm trying to set a dynamic character limit so I can do multiple elements on one page.

function tinyMceOnChange(inst){ 
    var atty = document.getElementById(inst.id).attributes;
    var x=0;
    for (x=0; x<1; x++){
        alert(atty[x].value);
    } 
    tinyMceCheckContentLength(inst.id,700);
}

I'm trying to find the maxlength i set on the tinymce textarea. I can get the tinymce object with the inst. But I can't seem to give it a maxlength. Any ideas?

67

Re: Limit the Number of characters entered in the editor

I guess this is one of those functions that users shouldn't use but we might need to implement anyway. I think it makes no sense what so ever to restrict character input to solve visual size problems and I will never change my mind on that. But some features in TinyMCE where added due to popular demand and I personally never use them. Andrew Ozz recently donated a wordcount plugin, been thinking of adding the max length restriction logic as an option for that one.

Best regards,
Spocke - Main developer of TinyMCE

68

Re: Limit the Number of characters entered in the editor

Would just like to comment that I'd love to see it implemented in some way.  We're using TinyMCE for comments on our new site, so we need the length restricted in some way.  Otherwise we'll get giant walls of text.

The problem with the "preview" suggestions listed so far is that they trust the user to make the right judgment, whereas my experience (with various sites totalling 10+ million hits per month) is that users can't be completely trusted.  Even if they can be trusted, some don't have the experience necessary in some situations to make the right call.

Anyway, just my 2 cents.  smile

69

Re: Limit the Number of characters entered in the editor

I would like to add my vote for this feature, as well.

I use TinyMCE quite a bit on forms. Many of those forms have character limits (minimum and maximum) to keep our users from submitting too little or too much information. While I use PHP to validate the character count when the form is submitted, I have found that our users get frustrated that they can't get at least a rough estimate as to how many characters they've used before they submit the form. A lot of users will submit the form over and over again just to try to keep track of their character count. It would be nice if they didn't have to take all of those extra steps.

Ideally, I would like to see the ability to count all characters (including HTML tags), just text characters (without HTML tags), characters not including spaces and the ability to count words (I know there's already a word counter implemented, but it would be nice if all of these things were rolled in together).

70

Re: Limit the Number of characters entered in the editor

Another vote for a character counter (count down).

On the current site I'm developing I have counting down on many of the fields using 'formfieldlimiter' (http://www.dynamicdrive.com/dynamicinde … tinput.htm) though I can't get it to work with TinyMCE (yet).

I feel that it is important to give users an idea of how much content they can add. It saves them having to continually resubmit if they are adding too much content when they are trying to get every last word in.

It also has the added advantage of encouraging users to add more content which often can be a great advantage.

Yes validation is also still done server side via PHP to be sure the JS wasn't tampered with.

Personally I require that the counter include markup, text and white space however, it would be great if it could be set with options such as count: markup | text | characters | words.

The count down format such as used for online SMS entries is very practical.

Anyway, I hope to see it happen soon so it can be used to make life easier for my site users.

71

Re: Limit the Number of characters entered in the editor

weblan wrote:

On the current site I'm developing I have counting down on many of the fields using 'formfieldlimiter' (http://www.dynamicdrive.com/dynamicinde … tinput.htm) though I can't get it to work with TinyMCE (yet).

Scripts on dynamicdrive.com are all veeeery outdated scripting style and many of them only work in IE because they don't stick to ECMA standards (or use DOM scripting at all). Your formfieldlimiter script uses addEvent() which is IE-only code. Enhance this function and the script should work in all major browsers. Use an internet search engine in order to find good solutions to add events to page elements!

Greetings from Germany,

Felix Riesterer.
-- I am neither Moxiecode nor Ephox! --

72

Re: Limit the Number of characters entered in the editor

I decided to write a very simple  plugin for character count down. I started with the word count plugin and made several tweeks to rework it for displaying a character count down based on some character limit. To use this code, you need to create a js var called charlimit. Set this variable to the maximum amount of allowed characters. I'm not claiming this to be the BEST solution, but it met my needs.

/**
 * $Id: editor_plugin_src.js 201 2009-09-14 15:56:56Z sfreeman $
 *
 * @author Scott Freeman The Scientist
 * @copyright Copyright © 2009, The Scientist, All rights reserved.
 */

(function() {
    tinymce.create('tinymce.plugins.CharCount', {
        block : 0,
        id : null,        
        countre : null,
        cleanre : null,
        init : function(ed, url) {
            var t = this, last = 0;
            t.countre = ed.getParam('wordcount_countregex', /\S\s+/g);
            t.cleanre = ed.getParam('wordcount_cleanregex', /[0-9.(),;:!?%#$¿'"_+=\\/-]*/g);
            t.id = ed.id + '-char-count';

            ed.onPostRender.add(function(ed, cm) {
                var row, id;

                // Add it to the specified id or the theme advanced path
                id = ed.getParam('charcount_target_id');
                if (!id) {
                    row = tinymce.DOM.get(ed.id + '_path_row');

                    if (row)
                        tinymce.DOM.add(row.parentNode, 'div', {'style': 'float: right'}, ed.getLang('charcount.chars', 'Characters Remaining: ') + '<span id="' + t.id + '">' + charlimit + '</span>');
                } else
                    tinymce.DOM.add(id, 'span', {}, '<span id="' + t.id + '">' + charlimit + '</span>');
            });

            ed.onInit.add(function(ed) {
                ed.selection.onSetContent.add(function() {
                    t._count(ed);
                });

                t._count(ed);
            });

            ed.onSetContent.add(function(ed) {
                t._count(ed);
            });

            ed.onKeyUp.add(function(ed, e) {
                if (e.keyCode == last)
                    return;
                t._count(ed);
                last = e.keyCode;
            });
        },

        _count : function(ed) {
            var t = this, tc = 0;

            // Keep multiple calls from happening at the same time
            if (t.block)
                return;

            t.block = 1;

            setTimeout(function() {
                var tx = ed.getContent({format : 'raw'});
                var tx_len = 0;
                var originalText = ed.getContent({format : 'raw'});
                if (tx) {
                    tx_len = tx.length;
                    tx = tx.replace(/<.[^<>]*?>/g, ' ').replace(/ | /gi, ' '); // remove html tags and space chars
                    //tx = tx.replace(t.cleanre, ''); // remove numbers and punctuation
                    tc = charlimit-tx.length+1;
                    tx_len = tx_len - tx.length;
                    
                } else {
                    tc = charlimit;
                }
                
                tinymce.DOM.setHTML(t.id, tc.toString());
                if(tc<0){
                    alert(charlimit+' character limit reached!');
                    originalText = originalText.substring(0,charlimit+tx_len-3);
                    ed.setContent(originalText);
                    var originalText2 = ed.getContent({format : 'raw'});
                    originalText2 = originalText2.replace(/<.[^<>]*?>/g, ' ').replace(/ | /gi, ' '); // remove html tags and space chars
                    tc = charlimit-originalText2.length+1;                    
                    tinymce.DOM.setHTML(t.id, tc.toString());
                }
                setTimeout(function() {t.block = 0;}, 60);
            }, 1);
        },

        getInfo: function() {
            return {
                longname : 'Char Count plugin',
                author : 'Moxiecode Systems AB',
                authorurl : 'http://tinymce.moxiecode.com',
                infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/charcount',
                version : tinymce.majorVersion + "." + tinymce.minorVersion
            };
        }
    });

    tinymce.PluginManager.add('charcount', tinymce.plugins.CharCount);
})();

73

Re: Limit the Number of characters entered in the editor

*cover head with helmet*

actually, i think putting a limit on characters on tinymce is a good idea *white flag*
maybe spocke would hit me with a baseball bat, but i really think the team should reconsider this feature...

74

Re: Limit the Number of characters entered in the editor

Having a document structure that is interrupted and incomplete by a character limit is a good idea?

75

Re: Limit the Number of characters entered in the editor

Guys, I have an idea!

Seems, here is already featured way to prevent a user of typing redundant text.
First, we're monitoring the length of the typed text, after a text limit reached, we toggle on Noneditable mode for TinyMCE. So, after user presses Backspace or selects a text and presses Delete key, we may toggle off the Noneditable mode. The problem here is in Ctrl+V, Shift+Ins combinations...

Last edited by FiMko (2009-12-16 09:48:03)