TinyMCE with div tag?

Question

Below is my JSP code:

<tr>
      <td colspan="2">custEmail</td>
      <td colspan="5"><div id= "custEmail"><p><strong>Test</strong></p></div></td>
</tr>

Below is the code attaching the div with TinyMCE Editor

<script type="text/javascript" src="tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinyMCE.init({
        width : "640",
        mode : "exact",
        elements : "custEmail",
        theme : "advanced",
        plugins : "preview",
        readonly : true,
        theme_advanced_buttons1 : "forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,formatselect,fontselect,fontsizeselect,sub,sup,|,bold,italic,underline,strikethrough",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true
    });
</script>

But on my HTML page, I see the content as:

<p><strong>Test</strong></p>

Instead of Bold Test. As soon as I change the following:

div id="custEmail" tag to textarea id="custEmail"

It works fine. Not sure if I need to have some setting for div tag?

Answer 1

All you need to do is to set forced_root_block to 'div' :

tinyMCE.init({
        ...
        forced_root_block : 'div'
});