tinyMCE 工具栏右侧的浮动按钮答案

【问题标题】：Float button to the right on tinyMCE toolbartinyMCE 工具栏右侧的浮动按钮
【发布时间】：2014-03-12 23:29:18
【问题描述】：

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

这是我的 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，虽然它出现在元素上，但元素并没有转到右侧。任何帮助将不胜感激。

【问题讨论】：

标签： javascript css tinymce

【解决方案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; 删除分隔符

【讨论】：

【解决方案2】：

最新版本使用 flexbox，因此浮动不起作用。

.tox-toolbar__group:last-child' {
    marginLeft: 'auto',
    borderLeft: 'none',
}

【讨论】：

这似乎不是 CSS，但如果你用 CSS 编写它确实可以：.tox-toolbar__group:last-child { margin-left: auto!important; }
@cronoklee 谢谢 - 你的版本在 TinyMCE 5.7 中对我有用

【解决方案3】：

使用css：

.mce-toolbar .mce-last { float: right; }

在某些浏览器中，最后一个项目可能会下拉，您可以将最后一个工具栏项目移到第一个并使用：

.mce-toolbar .mce-first { float: right; }

【讨论】：

【解决方案4】：

只有这个在 tinymce 4.7.13 中对我有用

.mce-toolbar .mce-btn-group { width: 100%; }
.mce-toolbar .mce-btn-group .mce-btn.mce-last { float: right; }

【讨论】：

【解决方案5】：

我们可以轻松自定义 CSS 样式，以便在 TinyMCE 编辑器上将工具栏按钮浮动到右侧。它的工具栏有一种名为“tox-toolbar__primary”的样式。

所以你可以像这样插入你的 CSS 代码：

.tox-toolbar__primary {
    display: flex;
    justify-content: flex-end;
}

【讨论】：

【解决方案6】：

只需进入 Common.js 文件中的 init Function 并编辑该函数

function InitTinyMCE() {
    tinymce.init({
        mode: "specific_textareas",
        editor_selector: "ub-textarea",
        theme: "modern",
        encoding: "xml",
        plugins: [
            "advlist autolink lists link image charmap print preview hr anchor pagebreak",
            "searchreplace wordcount visualblocks visualchars code fullscreen",
            "insertdatetime media nonbreaking save table contextmenu directionality",
            "emoticons template paste"
        ],
        toolbar1: "undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | emoticons",
        image_advtab: true,
        menubar: false,

        statusbar: false
    });
}

【讨论】：