What I'm trying to do is create a toolbar with some default buttons aligned to the left but then have a custom button/drop down aligned to the right of the very same toolbar.

Here's my 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>

So far this code works in the sense that a tinyMCE toolbar with all the elements is there, but still aligned to the left. Here's how it looks/should look:

Wrong:

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

Right:

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

As you can see, I tried adding css through the style (but also classes) option and although it appeared on the element, the element did not go to the right side. Any help would be appreciated.

What I'm trying to do is create a toolbar with some default buttons aligned to the left but then have a custom button/drop down aligned to the right of the very same toolbar.

Here's my 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>

So far this code works in the sense that a tinyMCE toolbar with all the elements is there, but still aligned to the left. Here's how it looks/should look:

Wrong:

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

Right:

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

As you can see, I tried adding css through the style (but also classes) option and although it appeared on the element, the element did not go to the right side. Any help would be appreciated.

• javascript
• css
• tinymce

6 Answers 6

You didn't specify your TinyMCE version so I'll assume you're talking about TinyMCE 4.

First, you need to make sure that the buttons you want to align to the right belong to a group. In the below example toolbar we're going to right align the fullscreen button. We place that button in its own group by preceding it with a pipe: |.

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

Now, using CSS pseudo elements we're targetting the last group in the toolbar as follows:

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

We're aligning it to the right with float:right and removing the separator with border-left: none;

Most recent versions use flexbox so float won't work.

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

We can custom the CSS styles easily so that float the toolbar buttons to the right on TinyMCE editor. Its toolbar has a style called 'tox-toolbar__primary'.

So you can insert your CSS code like this:

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

use css:

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

In some brower, the last item may dropdown, you can move the last toolbar item to first and use:

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

Only this one worked for me in tinymce 4.7.13

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

Just go to init Function in Common.js file and edit the fuction

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