带有浮动 DIV 元素的 TinyMCE 模板

Question

TinyMCE 模板（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 具有以下设置：

<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>

编辑器中原来的HTML会是这样的：

<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>

如果我随后编辑左侧 <div> 的内容，并添加按 "enter"，我希望看到编辑器中的内容有换行符，但是，每次我按 "enter"，添加了一个单独的浮动 <div>，因此没有换行符。

<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>

作为解决方法，我发现我可以在浮动 <div> 元素的内容周围添加 <p> 标签：

<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>

最近的尝试似乎创造了预期的结果，但是，这不是正确的方法。

<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>

添加包含浮动 <div> 元素的 TinyMCE 模板的正确方法是什么？

Answer 1

这个插件帮助我创建了模板 - TinyMCE Templates。或者您可以尝试 TinyMCE Custom Templates 更复杂的模板。

带有浮动 DIV 元素的 TinyMCE 模板

TinyMCE templates with floated DIV elements

html

templates

tinymce