TinyMCE templates (http://www.tinymce.com/wiki.php/Plugin:template) can be used to pre-define the HTML inside TinyMCE. For the real application, I would use content_css and a TinyMCE template, however, for the example below, I have used inline styling and hardcoded the HTML which produces the same results. Consider http://fiddle.tinymce.com/BPeaab/1 with the following setup:
<script type="text/javascript">
tinymce.init({
selector: "textarea",
});
</script>
<form method="post" action="dump.php">
<textarea name="content">
<div style="float: left;">Left Div</div>
<div style="float: right;">Right Div</div>
</textarea>
</form>
The original HTML in the editor will be the following:
<body contenteditable="true" data-id="content" class="mce-content-body " id="tinymce" spellcheck="false">
<div data-mce-style="float: left;" style="float: left;">Left Div</div>
<div data-mce-style="float: right;" style="float: right;">Right Div</div>
</body>
If I then edit the content on the left <div>, and add press "enter", I desire to see the content in the editor have line breaks, however, instead each time I press "enter", a separate floated <div> is added and thus no line breaks.
<body contenteditable="true" data-id="content" class="mce-content-body " id="tinymce" spellcheck="false">
<div data-mce-style="float: left;" style="float: left;">Left some text on first line.</div>
<div data-mce-style="float: left;" style="float: left;">Some text on second line.</div>
<div data-mce-style="float: left;" style="float: left;">
<br data-mce-bogus="1"></div>
<div data-mce-style="float: left;" style="float: left;">Some text on forth line.Div</div>
<div data-mce-style="float: right;" style="float: right;">Right Div</div>
</body>
As a workaround, I have found that I could add <p> tags around the content in the floated <div> elements:
<script type="text/javascript">
tinymce.init({
selector: "textarea",
});
</script>
<form method="post" action="dump.php">
<textarea name="content">
<div style="float: left;"><p>Left Div</p></div>
<div style="float: right;"><p>Right Div</p></div>
</textarea>
</form>
This latest attempt appears to create the desired results, however, expect it is not the proper way to do so.
<body contenteditable="true" data-id="content" class="mce-content-body " id="tinymce" spellcheck="false">
<div data-mce-style="float: left;" style="float: left;">
<p>Left Add some text.</p>
<p>Add some text.</p>
<p><br data-mce-bogus="1"></p>
<p>Add some text.</p><p>Div</p>
</div>
<div data-mce-style="float: right;" style="float: right;"><p>Right Div</p></div>
</body>
What is the proper way to add a TinyMCE template which contains floated <div> elements?
This add-on helped me creating templates - TinyMCE Templates. Or you can try TinyMCE Custom Templates for more complicated templates.