Limit the number of characters in a WYSIWYG Editor (NicEdit)

Question

I have this jQuery code:

var char = 60;
    $("#counter").append("You have <strong>" + char + "</strong> char.");
    $("#StatusEntry").keyup(function () {
        if ($(this).val().length > char) {
            $(this).val($(this).val().substr(0, char));
        }
        var rest = char - $(this).val().length;
        $("#counter").html("You have <strong>" + rest + "</strong> char.");
        if (rest <= 10) {
            $("#counter").css("color", "#ff7777");
        }
        else {
            $("#counter").css("color", "#111111");
        }
    });

It works fine! But if instead a val() I have text() it doesn't work.

The problem is that at the end of available char it start to replace the text from the beginning...... using val is perfect.

Why I need it on text? Because I'm using a wysiwyg plugin and it convert my textarea to div.

I'm trying with .stopPropagation but it doesn't work.. trying with return false and nothing...

Hope in your help!

Stout

Which line does it not work when you change val() to text() ... what doesnt work ? and can you please include your HTML ... i have no idea what statusentry is ... – Sadfaced

if you change every val() to text() and you start typing, at 60 char it start to replace the text from begin. – Stout

like this -> jsfiddle.net/RjNuX/1 – Sadfaced

Your substr was incorrect, works here -> jsfiddle.net/RjNuX/2 – Sadfaced

yes exactly, if you use a wysiwyg plugin and if you don't have anymore a textarea but a <div> you need to use .text() to get values... and it doesn't work anymore... – Stout

More than likely the rich text editor is more than a simple div and has its own callback that you can use to achieve this. Which editor are you using? – Tramroad

text() wont work on a textarea as the text within it is stored as its value - can you tell us which WYSIWYG editor your using ? – Sadfaced

Works fine for me using a div and contentEditable=true -> jsfiddle.net/RjNuX/3 – Sadfaced

please insert an answer so I can close the question. Thanks. – Stout

you mean you dont need the WYSIWYG editor any more ? just a contentEditable div ? – Sadfaced

Answer 1

If you need to use the NicEdit then you can limit the keystrokes by binding the keyup / keydown event to the newly created div (it doesnt replace your textarea - its adds a div and hides your textarea) :

$("#StatusEntry").prev().keydown(function () {

This works because the newly create div is always preceding the textarea - so this will work for multiple editors.

However as you seem to have indicated in your comments a contentEditable div may be sufficient - if it is use the following method :

    var char = 60;
    $("#counter").append("You have <strong>" + char + "</strong> char.");
    $("#StatusEntry").keyup(function () {
        if ($(this).text().length > char) {
            $(this).text($(this).text().substr(1));
        }
        var rest = char - $(this).text().length;
        $("#counter").html("You have <strong>" + rest + "</strong> char.");
        if (rest <= 10) {
            $("#counter").css("color", "#ff7777");
        }
        else {
            $("#counter").css("color", "#111111");
        }
    });

Demo : http://jsfiddle.net/RjNuX/3

Sadfaced

the solution you suggest works, but replacing the textarea with a div simply cancels the form submitting. (There is no textarea to submit). How could this be done without replacing textarea with a div? – Stacte

Answer 2

you have to target the nice edit div.

$(".nicEdit-main").keyup(...

If you have multiple editors, this solution will not work.

Tramroad

Answer 3

var len = 40;    
$(".nicEdit-main").keydown(function () {
    if($(".nicEdit-main").html().length>len){
        var string = $('.nicEdit-main').html();
        $('.nicEdit-main').html(string.substring(0, len));
        placeCaretAtEnd($('.nicEdit-main').get(0));
    }
});

placeCaretAtEnd function from here

Wareroom