validate textarea using tinyMCE - jquery

问题

I'm trying to validate a textarea so a user can't add a new empty message via tinyMCE textarea.

But it just don't seems to work.

What am i doing wrong ?

JS:

var msg = $("#msg");
        if(msg.val() == ''){
             $("#msg_error").html("* Can't add an empty message");
        }

Textarea

<textarea rows="5" cols="35" id="msg"></textarea>

回答1:

The textarea in TinyMCE is not always purely empty, althuogh you see nothing, TinyMCE automatically adds html to the textarea. What this means is the textarea will contain html code like <p> </p>. What you must do is use php's strip_tags function to remove html and test for emptiness afterward. Goodluck.

$texttostrip = strip_tags($_POST['formdata']);
if($texttostrip != "") echo "Empty Field";

This would mean using ajax requests to check the data every now and then.

回答2:

Yes, i found the solution!!

Here it comes:

var content = tinyMCE.get('msg').getContent(); // msg = textarea id

if( content == "" || content == null){
             $("#msg_error").html("* Can't add an empty message");
        }

回答3:

Solution

var msg = strip_tags(tinyMCE.get('msg').getContent({format: 'raw'})); // msg = textarea id

Where strip_tags() is a required custom function as defined below:

function strip_tags(input, allowed) {
      //  discuss at: http://phpjs.org/functions/strip_tags/
      // original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
      // improved by: Luke Godfrey
      // improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
      //    input by: Pul
      //    input by: Alex
      //    input by: Marc Palau
      //    input by: Brett Zamir (http://brett-zamir.me)
      //    input by: Bobby Drake
      //    input by: Evertjan Garretsen
      // bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
      // bugfixed by: Onno Marsman
      // bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
      // bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
      // bugfixed by: Eric Nagel
      // bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
      // bugfixed by: Tomasz Wesolowski
      //  revised by: Rafał Kukawski (http://blog.kukawski.pl/)
      //   example 1: strip_tags('<p>Kevin</p> <br /><b>van</b> <i>Zonneveld</i>', '<i><b>');
      //   returns 1: 'Kevin <b>van</b> <i>Zonneveld</i>'
      //   example 2: strip_tags('<p>Kevin <img src="someimage.png" onmouseover="someFunction()">van <i>Zonneveld</i></p>', '<p>');
      //   returns 2: '<p>Kevin van Zonneveld</p>'
      //   example 3: strip_tags("<a href='http://kevin.vanzonneveld.net'>Kevin van Zonneveld</a>", "<a>");
      //   returns 3: "<a href='http://kevin.vanzonneveld.net'>Kevin van Zonneveld</a>"
      //   example 4: strip_tags('1 < 5 5 > 1');
      //   returns 4: '1 < 5 5 > 1'
      //   example 5: strip_tags('1 <br/> 1');
      //   returns 5: '1  1'
      //   example 6: strip_tags('1 <br/> 1', '<br>');
      //   returns 6: '1 <br/> 1'
      //   example 7: strip_tags('1 <br/> 1', '<br><br/>');
      //   returns 7: '1 <br/> 1'

      allowed = (((allowed || '') + '')
        .toLowerCase()
        .match(/<[a-z][a-z0-9]*>/g) || [])
        .join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
      var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
        commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
      return input.replace(commentsAndPhpTags, '')
        .replace(tags, function($0, $1) {
          return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
        });
    }

And then, you may perform the desired validations on variable msg e.g. to check if it is blank:

if (msg == '') {
    // TinyMCE is blank
}

How It Works

Using TinyMCE's inbuilt function with the option 'raw' (link) returns the HTML and text but with entities like   converted to space, which helps in better validation e.g.   in plaintext (after trimming also) will fail the empty string test.

Then the custom function strip_tags removes the HTML tags to provide you with plaintext on which validation tests can be run with more success.

Credits

This solution has been inspired from @william's answer, going through the documentation of TinyMCE, and with some help from phpjs.org.

来源：https://stackoverflow.com/questions/2012312/validate-textarea-using-tinymce-jquery

标签

jquery

tinymce