Apply TinyMCE to specific textarea

In this article, I am going to show you 2 ways to apply TinyMCE to specific textarea on your web page.

Apply TinyMCE to textarea (in general):

//HTML:
<textarea name="article_text" cols="50" rows="15" id="article_text"></textarea>
<textarea name="article_content" cols="50" rows="15" id="article_content"></textarea>
<textarea name="article_ref" cols="50" rows="15" id="article_ref"></textarea>

//JavaScript:
<script type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script>

Apply TinyMCE specific textarea using Way 1:

You can apply TinyMCE to specific textarea(s)  using their “ID”.

//HTML:
<textarea name="article_text" cols="50" rows="15" id="article_text"></textarea>
<textarea name="article_content" cols="50" rows="15" id="article_content"></textarea>
<textarea name="article_ref" cols="50" rows="15" id="article_ref"></textarea>

//JavaScript:
<script type="text/javascript">
tinyMCE.init({
mode : "exact",
elements : "article_text, article_content" // Simply enter comma seprated IDs of your textarea for which you want to add TinyMCE
});
</script>

Apply TinyMCE specific textarea using Way 2:

You can apply TinyMCE to specific textarea(s)  using their “class”.

//HTML:
<textarea name="article_text" cols="50" rows="15" id="article_text" class="my_editor"></textarea>
<textarea name="article_content" cols="50" rows="15" id="article_content" class="my_editor2"></textarea>
<textarea name="article_ref" cols="50" rows="15" id="article_ref" class="not_my_editor"></textarea>

//JavaScript:
<script type="text/javascript">
tinyMCE.init({
mode : "specific_textareas",
editor_selector : "my_editor, my_editor2", // Simply enter comma seprated class of your textarea for which you want to add TinyMCE
});
</script>

That’s it!

Do you know of any other ways to apply TinyMCE to specific textarea ? If so, please share with us by commenting below.