NaughtySquid
NaughtySquid

Reputation: 2097

tinymce - adjust this js to affect only 1 textarea

Basically I use TinyMCE for my text areas for easier editing and someone constructed this JS for me to make a textarea only go to 255 characters.

The only problem is that it affects all textareas on a page its included on instead of a set one, I know no JS so I am wandering if one of you wizards could guide me to add a place I can set what textarea to affect?

<script type="text/javascript" src="/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
        mode : "textareas",
        theme : "advanced",
        plugins : "bbcode",
        theme_advanced_buttons1 : "bold,italic,underline,undo,redo,link,unlink,image,forecolor,styleselect,removeformat,cleanup,code",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : "",
        theme_advanced_toolbar_location : "bottom",
        theme_advanced_toolbar_align : "center",
        theme_advanced_styles : "Code=codeStyle;Quote=quoteStyle",
    theme_advanced_resizing : true,
    theme_advanced_path : false,
        content_css : "css/bbcode.css",
        entity_encoding : "raw",
        add_unload_trigger : false,
        remove_linebreaks : false,
        inline_styles : false,
        forced_root_block : '',
        convert_fonts_to_spans : false,
        theme_advanced_statusbar_location : "bottom",
    setup: function(ed) {
        ed.onKeyUp.add(function(ed, e) {
        // What is the max amount of characters you want
        var maxChars = 255;
        var content = tinyMCE.activeEditor.getContent();
        // Remove any BBCode tags from the count
        var strip = content.replace(/\[\/?(?:b|i|u|url|quote|code|img|color|size)*?.*?\]/img, '');
        // Set the text for what we want to display in the status bar
        var text = strip.split(' ').length + " Words, " + strip.length + " Characters"
        // Show the status bar message
                tinymce.DOM.setHTML(tinymce.DOM.get(tinyMCE.activeEditor.id + '_path_row'), text);
        // Is there more Characters than we want
        if (strip.length > maxChars) 
        {
            // Show an alert (can comment out)
            alert("Sorry too many characters "  + strip);
            // Get all characters up to the limit
            cur = strip.substring(0,maxChars);
            // Replace content with the max amount
            tinyMCE.activeEditor.setContent(oldContent);
        }

        else
        {
            oldContent = content;

        }

            });

        }
});

Upvotes: 0

Views: 1132

Answers (3)

NaughtySquid
NaughtySquid

Reputation: 2097

Display Name here is the new code then can you check it over :), think i got it right.

<script type="text/javascript" src="/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
        mode : "textareas",
        theme : "advanced",
        plugins : "bbcode",
        theme_advanced_buttons1 : "bold,italic,underline,undo,redo,link,unlink,image,forecolor,styleselect,removeformat,cleanup,code",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : "",
        theme_advanced_toolbar_location : "bottom",
        theme_advanced_toolbar_align : "center",
        theme_advanced_styles : "Code=codeStyle;Quote=quoteStyle",
    theme_advanced_resizing : true,
    theme_advanced_path : false,
        content_css : "css/bbcode.css",
        entity_encoding : "raw",
        add_unload_trigger : false,
        remove_linebreaks : false,
        inline_styles : false,
        forced_root_block : '',
        convert_fonts_to_spans : false,
        theme_advanced_statusbar_location : "bottom",
    setup: function(ed) {
        ed.onKeyUp.add(function(ed, e) {
        // What is the max amount of characters you want
        var maxChars = 255;
        var content = tinyMCE.activeEditor.getContent();
        var editor_name = tinyMCE.activeEditor.editorId;
        var editors_to_be_matched = /tagline/;
        var matched = editor_name.match(editors_to_be_matched);

        if(!matched) return;

        // Remove any BBCode tags from the count
        var strip = content.replace(/\[\/?(?:b|i|u|url|quote|code|img|color|size)*?.*?\]/img, '');
        // Set the text for what we want to display in the status bar
        var text = strip.split(' ').length + " Words, " + strip.length + " Characters"
        // Show the status bar message
                tinymce.DOM.setHTML(tinymce.DOM.get(tinyMCE.activeEditor.id + '_path_row'), text);
        // Is there more Characters than we want
        if (strip.length > maxChars) 
        {
            // Show an alert (can comment out)
            alert("Sorry too many characters "  + strip);
            // Get all characters up to the limit
            cur = strip.substring(0,maxChars);
            // Replace content with the max amount
            tinyMCE.activeEditor.setContent(oldContent);
        }

        else
        {
            oldContent = content;

        }

            });

        }
});
</script>

Upvotes: 0

yb007
yb007

Reputation: 1377

All you need to do is

//find the id of the currently active editor
var editor_name=tinyMCE.activeEditor.editorId;

then

//provide regex for list of editors to be matched
var editors_to_be_matched = /first_editor|third_editor/;

find

//if active editor matches against the list of editors
var matched = editor_name.match(editors_to_be_matched);

if

//active editor does not matches return
if(!matched) return;

else

//do character count stuff
your code here

So here is how it would look like in your case

 ed.onKeyUp.add(function(ed, e) {
    var editor_name =tinyMCE.activeEditor.editorId;
    var editors_to_be_matched = /first_editor|third_editor/;
    var matched = editor_name.match(editors_to_be_matched);

    if(!matched) return;
    alert("Do character count stuff here");
    // your code here


    // What is the max amount of characters you want
    var maxChars = 255;
    var content = tinyMCE.activeEditor.getContent();
    ........
    ..........

        });

Here is a DEMO

Upvotes: 2

Tornike
Tornike

Reputation: 1254

to make tinymce work on only some textareas you should change mode to "exact" and specify html element IDs in element parameter like this:

tinyMCE.init({
        mode : "exact",
        elements : "elm1,elm2",
});

you can find more info about tinymce modes here: http://www.tinymce.com/wiki.php/Configuration:mode

Upvotes: 1

Related Questions