CODEWITHSUNDEEP
javascriptcsstinymce
Tom Prats
Tom Prats

Reputation: 7911

Float button to the right on tinyMCE toolbar

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.

Upvotes: 1

Views: 5802

Answers (6)

msilucifer
msilucifer

Reputation: 746

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

Upvotes: 1

Vassilis
Vassilis

Reputation: 2841

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

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

Upvotes: 2

Diogo Garcia
Diogo Garcia

Reputation: 594

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

Upvotes: 0

hadi
hadi

Reputation: 1

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

Upvotes: -1

bart
bart

Reputation: 15298

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;

Upvotes: 2

笑笑十年
笑笑十年

Reputation: 131

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

Upvotes: 0

Related Questions