javascript - 在 tinyMCE 工具栏上向右浮动按钮

Question

我想做的是创建一个工具栏，其中一些默认按钮与左侧对齐，但随后有一个自定义按钮/下拉菜单与同一工具栏的右侧对齐。

这是我的 html/javascript/init:

<h3>
  Behold: Magic
</h3>
<div>
  <%= text_area_tag :content, "", id: "magic", rows: 20 %>
</div>
<script type="text/javascript">
tinymce.init({
  selector: "#magic",
  plugins: "link image",
  menubar: false,
  toolbar: "bold italic underline strikethrough | styleselect | bullist numlist | undo redo | link image | insertField",
  setup: function(editor) {
    editor.addButton("insertField", {
      type: "menubutton",
      text: "Insert Field",
      style: "float: right",
      menu: [
        { text: "First Name", onclick: function() { editor.insertContent("tom"); } },
        { text: "Last Name", onclick: function() { editor.insertContent("prats"); } }
      ]
    });
  }
});
</script>

到目前为止，这段代码的工作原理是，包含所有元素的 tinyMCE 工具栏都在那里，但仍然左对齐。这是它的外观/应该看起来的样子:

错误:

These | Count | As | Buttons | Floated | Left | Floated Right

右:

These | Count | As | Buttons | Floated | Left                       Floated Right

如您所见，我尝试通过样式(还有类)选项添加 css，尽管它出现在元素上，但元素并没有转到右侧。任何帮助将不胜感激。

Answer 1

您没有指定您的 TinyMCE 版本，所以我假设您说的是 TinyMCE 4。

首先，您需要确保要右对齐的按钮属于一个组。在下面的示例工具栏中，我们将右对齐 fullscreen 按钮。我们通过在按钮前面加上竖线来将该按钮放在它自己的组中:|。

toolbar: 'h2 bold italic | bullist numlist | link unlink | fullscreen'

现在，我们使用 CSS 伪元素来定位工具栏中的最后一组，如下所示:

.mce-btn-group:last-child {
    float:right;
    border-left: none;
}

我们使用 float:right 将其右对齐，并使用 border-left: none; 移除分隔符