-1

I'm working with TinyMCE. The problem is every time I try to post after fulfilling a set of conditions for title and body, I get the error message for minimal body chars. If I delete this condition it is posted successfully. If I remove the TinyMCE and use simple a textarea it will again be posted successfully. What is wrong between TinyMCE and if-condition for body.

<script type="text/javascript">
    $(document).ready(function() {
        $('#submit').click(function() {
            var title = $('#title').val();
            var body = $('#editor').val();
            if (title == '') {
                $('#erd').html('Please enter a title first');
                return false;
            }
            if (body.length < 500) {
                $('#erd').html('Body must not be less than 500 characters');
                return false;
            }
        });
    });
</script>

<legend>Title:</legend>
<input type="text" id="title" name="title" />
<br />
<br />
<legend>Body:</legend>
<textarea name="body" id="editor" style="border-radius:5px;"></textarea>
<br />
<script type="text/javascript" src="./js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
    tinymce.init({
        selector: "textarea#editor",
        width: "640px",
        height: "300px",
        browser_spellcheck: true,
        plugins: [
            "advlist autolink textpattern wordcount lists link image charmap preview",
            "searchreplace code fullscreen imagetools jbimages save",
            "media table contextmenu paste"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | underline | strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent| blockquote | link jbimages | media",
        relative_urls: false,
    });
</script>
insertusernamehere
  • 23,204
  • 9
  • 87
  • 126
bɪˈɡɪnə
  • 1,087
  • 2
  • 23
  • 46
  • Could you test the length and content of body when code enters the if statement by using code this: `console.log(body.length); console.log(body);` – weidler Nov 10 '15 at 08:38
  • Where is `'#submit'`? – RobG Nov 10 '15 at 08:40
  • @T.W. I am using wordcount plugin along tinymce 1000 words will surely be more than 500 chrs and also as i said with simple textarea that if condition also works fine, somethings wrong with tinymce and my code for body chars requirement – bɪˈɡɪnə Nov 10 '15 at 08:47

1 Answers1

0

The problem you're experiencing is that TinyMCE will fill the textarea only after your code has run. Besides that, it's not given that a user clicks on the submit button, but hits enter to submit the form.

So, what you could do is to bind your test to the actual event of submitting the form:

$('formSelector').submit(function() {
    if (title == '') { … }
});

Also at this point the textarea does not have the updated value from the editor. You can however check the length of the content by accessing TinyMCE's content directly, like:

tinyMCE.activeEditor.getContent()
tinyMCE.activeEditor.getContent({format : 'raw'});
tinyMCE.get('content id').getContent()

You can now check the length like:

if (500 > tinyMCE.activeEditor.getContent().length) {}

See also

insertusernamehere
  • 23,204
  • 9
  • 87
  • 126
  • 1
    @bɪˈɡɪnə The three lines only represents different ways to get content from one or more TinyMCE instances. You should be fine with the first one, if you only have one editor on the current page. The last line of code is the one you should use: `if (500 > tinyMCE.activeEditor.getContent().length) {$('#erd').html('Body must not be less than 500 characters');}`. – insertusernamehere Nov 10 '15 at 10:24
  • @bɪˈɡɪnə Actually it should. I've tested it before posting the answer. Do you get any errors in your console? – insertusernamehere Nov 10 '15 at 10:48
  • @bɪˈɡɪnə As a note: if you have used `$('formSelector').submit(function() {});` you have to change the selector of course. ;) – insertusernamehere Nov 10 '15 at 10:52