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;移除分隔符border-left: none;

Answer 2

大多數最新版本使用 flexbox，因此浮動不起作用。

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

Answer 3

使用CSS：

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

在某些瀏覽器中，最后一項可能會下拉，您可以將最后一項工具欄項移至第一項並使用：

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

Answer 4

在tinymce 4.7.13中只有這個對我有用

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

Answer 5

我們可以輕松自定義 CSS 樣式，以便在 TinyMCE 編輯器上將工具欄按鈕浮動到右側。 它的工具欄有一種名為“tox-toolbar__primary”的樣式。

所以你可以像這樣插入你的 CSS 代碼：

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

Answer 6

只需轉到 Common.js 文件中的 init 函數並編輯該函數

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
    });
}