Question

TinyMCE模板（http://www.tinymce.com/wiki.php/Plugin:template）可用于在TinyMCE中预定义HTML。对于实际应用程序，我将使用content_css和TinyMCE模板，但是，对于下面的示例，我使用了内联样式并硬编码HTML，从而产生相同的结果。请使用以下设置考虑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>的内容，并添加按“回车”，我希望看到编辑器中的内容有换行符，但是，每次按“输入”时，添加了单独的浮动<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>

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

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

1 个答案: