How to find/detect any textarea in page using jQuery?

Question

I want to put a function call in my pages called enableTinyMCE(); In that function I want to see if there are any textarea's in my page and if so do the tinyMCE.init() function. How do I detect if there are any textarea elements in the page?

Answer 1

if($('textarea').length > 0) {
    document.write('we have at least one textarea');
}

OR

if($('textarea').length) {
    document.write('we have at least one textarea');
}

Read this, from the FAQ:

http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_test_whether_an_element_exists.3F

Answer 2

A jQuery selector always returns an array even if no matching elements are found. This means that you need to check the length. Try this instead.

if($('textarea').length > 0) {    
 document.write('we have at least one textarea');
}

Answer 3

if( $('textarea').length > 0 ) {
    ...
}

Answer 4

I have done the following as suggested however I still only want to call enableTinyMCE if there are textareas in my page. I cannot call this function in document.ready. See Google! Any ideas?

$(function() {

     if ($('textarea').length > 0)
    {
       var data = $('textarea');
       $.each(data, function(i)
       {
         tinyMCE.execCommand('mceAddControl', false, data[i].id);
       }
       );
    }

});

function enableTinyMCE()
{
        tinyMCE.init({
            plugins: 'paste',
            theme_advanced_toolbar_location: 'top',
            theme_advanced_buttons1: 'pastetext,pasteword,copy,cut,separator,bold,italic,underline,separator,bullist,numlist,separator,undo,redo,separator,link,unlink,separator,charmap,separator,formatselect,separator,code',
            theme_advanced_buttons2: '',
            theme_advanced_buttons3: '',
            mode: 'textareas',
            theme: 'advanced',
            theme_advanced_blockformats: 'None=p,Heading 3=h3,Heading 2=h2'
        });
}

the tinymce.init needs to be called outside of documentready but $('textarea').length is always zero outside of documentready. Help!

Answer 5

To expand on karim79 answer.

From the jQuery docs page: Note: It isn't always necessary to test whether an element exists. The following code would show the item if it exists, and do nothing (no errors) if it did not.

Which that means is that you can just do:

$(function(){
    $("textarea").each(function(i){
     this.enableTinyMCE();
    })
})

Edit:

There is actually a jQuery plugin being developed for this purpose. I would download and try out the plugin and contribute to it's development if you can.

jq-tinyMCE

Answer 6

This is my solution

if ($('textarea').length > 0)
    {
       var data = $('textarea');
       $.each(data, function(i)
       {
         tinyMCE.execCommand('mceAddControl', false, data[i].id);
       }
       );

       $('form').bind('form-pre-serialize', function(e) {
            tinyMCE.triggerSave(true,true);
        });
    }

And to enable tinyMCE I have done this

<% if (ViewData["TextAreaVisible"] != null && bool.Parse(ViewData["TextAreaVisible"].ToString()) == true)
   {%>
        <script type="text/javascript" src="../../Scripts/tinymce/tiny_mce.js"></script>
        <script type="text/javascript">
           enableTinyMCE();
        </script>
<%} %>

EnableTinyMCE does this

function enableTinyMCE() {

    tinyMCE.init({
        plugins: 'paste',
        theme_advanced_toolbar_location: 'top',
        theme_advanced_buttons1: 'pastetext,pasteword,copy,cut,separator,bold,italic,underline,separator,bullist,numlist,separator,undo,redo,separator,link,unlink,separator,charmap,separator,formatselect,separator,code',
        theme_advanced_buttons2: '',
        theme_advanced_buttons3: '',
        mode: 'none',
        theme: 'advanced',
        theme_advanced_blockformats: 'None=p,Heading 3=h3,Heading 2=h2'
    });

}

Answer 7

It is worth noting that the functionality you are looking for can be handled by TinyMCE itself:

If you set the mode parameter to textareas in your tinyMCE.init() call, it will automatically convert any textareas it finds to editor instances. If there's no textareas, it won't do anything, quietly.

tinyMCE.init({
    ...
    mode : "textareas",
    ...
});

Conversely, you could tell TinyMCE to convert only textareas that match a CSS class name by using the specific_textareas value to the mode parameter.

tinyMCE.init({
   ...
   mode : "specific_textareas",
   editor_selector : "mceEditor"
});

http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/mode