Conflict between JQuery and TinyMCE

Question

Hi all,

I got a .ctp web page with the following lines of code:

<script type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script>

<script type="text/javascript">
    tinyMCE.init({
        theme : "simple",
        mode : "textareas",
        convert_urls : false
    });
</script> 

<Script language="javascript">
$(document).ready(function(){  
    $(document).change(function(){   
        if($('#data\\[Test\\]\\[content\\]').val().length<10){
alert('must be ten characters');
        }

});
});
</script>


    <form name="addpost" id="addpost" method="post" action="/Site1/addtopic">
    <table>
    <tr>    
        <td>
            <div id="content">          
            <textarea rows="12" cols="48" name="data[Test][content]" id="data[Test][content]"></textarea>
            </div>
        </td>
    </tr>

    <tr>
        <td>
        <input type="submit" value="Send">
        </td>
    </tr>
    </table>

No matter how many characters I have entered into the textarea, the alert box will pop up saying "must be ten characters".

Could you help me please?

Answer 1

If I remember it correct, .val() doesn't work correctly to get value of a tinyMCE textarea.

Try this to get the value instead:

tinyMCE.activeEditor.getContent();

Answer 2

I'm not an HTML buff, but I don't think textareas have values. I'd try innerHTML.

edit: sorry that's rubbish.

Strangely, I've just had to do a similar thing this morning. The textarea you define to be used by TinyMCE is probably not the actual textarea you see. Try using Firebug in Firefox to inspect the id/name of the textarea that is displayed.