Tinymce: How to Display All Toolbars on a Single Row

TinyMCE: How to display all toolbars on a single row?

Each line of buttons is wrapped in a table so theme_advanced_buttons1 is inside a table, theme_advanced_buttons2 is inside another table and theme_advanced_buttons3 is inside another one, so to make them inline you can use

.wp_themeSkin table.mceToolbar {
  margin: 0 6px 2px; // this is by default
  display: inline-table; // this is extra I've added to keep them in single line
}

Below is a screenshot of display: inline-table; in full screen mode of the editor, all three lines of buttons are in one line, side by side

How to show all the toolbar buttons in Tinymce 5?

https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar_mode

You can see all toolbar buttons with changing toolbar mode.

Is there a way to wrap the toolbar buttons to the next row in TinyMCE if the width of the editor is too small?

No, unfortunately, this is not possible (using Tinymce3).
For Tinymce4, this is another issue.

TinyMCE hide toolbar overflow programmatically

I have updated your fiddle: https://fiddle.tiny.cloud/Q6haab/2

You can use the queryCommandState on ToggleToolbarDrawer to see if the drawer is open and if it is you can close it with the appropriate ExecCommand:

if(tinymce.activeEditor.queryCommandState('ToggleToolbarDrawer')) {
  tinymce.activeEditor.execCommand('ToggleToolbarDrawer');
}

Tinymce: How to display a popover dynamic toolbar;

The functionality that provides that is the editor.addContextToolbar where you can find related documentation on:

https://www.tinymce.com/docs/api/tinymce/tinymce.editor/#addcontexttoolbar

In other words a recomended way to develop your plugin is:

 tinymce.PluginManager.add('imageClick',function(editor){
      var lastSelectedImage=undefined;
      function addEvents() {
        editor.on('click', function (e) {
          if (lastSelectedImage && lastSelectedImage.src != e.element.src) {
            lastSelectedImage = undefined;
          }
          // Set up the lastSelectedImage
          if (isEditableImage(e.element)) {
            lastSelectedImage = e.element;
          }
        });
      }
      function isEditableImage(img) {
        var selectorMatched = editor.dom.is(img, 'img:not([data-mce-object],[data-mce-placeholder])');
        return selectorMatched;
      }
      function addToolbars() {
          var toolbarItems = editor.settings.myimagetools_toolbar;
          if (!toolbarItems) {
            toolbarItems = 'alignleft aligncenter alignright alignjustify';
          }
          editor.addContextToolbar(
            isEditableImage,
            toolbarItems
          );
      }
      addToolbars()
      addEvents()
    })

Based on the source code of imagetools plugin.

Tip:

You can have access to plugin source code by download the dev package of tinymce:

http://download.ephox.com/tinymce/community/tinymce_4.6.4_dev.zip?_ga=2.167213630.1854029251.1501225162-27629746.1501225162

Unziping it && look into ^location_you_unziped/tinymce/src/plugins^ in order to have a look and base your plugins over the ones that tinymce provides.

How can I make a fluid toolbar with floating buttons in TinyMCE?

Aha, found it, the white-space property is set to nowrap on everything in the toolbar, in the default skin as well as most other skins. Use this CSS to override it:

.mceToolbar * {
    white-space: normal !important;
}
.mceToolbar tr,
.mceToolbar td {
    float:left !important;
}

I'm not sure which specific elements really need the white-space fix, but this works perfectly.

Demo: http://fiddle.tinymce.com/becaab

Example output with a smaller toolbar (the buttons will now stack instead of go off screen):

How to hide toolbar with buttons in TinyMCE?

Using tinyMCE 4 you can set the following in the tinymce init:

toolbar: false

Here is a full blown example of the init if you want a clean editor with no options:

<script type="text/javascript">
    tinymce.init({
        menubar: false,
        statusbar: false,
        toolbar: false
    });
</script>

Rails 5.2 tinymce_rails gem Not Showing Multiple Toolbars

You are limiting you toolbar to display icons

//current code 
toolbar: "styleselect | bold italic | code codeformat | undo redo",

//add more items
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image jbimages",

Below the is code with all the possible features and you can also view it here

tinymce.init({
  selector: 'textarea#full-featured',
  plugins: 'print preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link media mediaembed template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker imagetools textpattern noneditable help formatpainter permanentpen pageembed charmap tinycomments mentions quickbars linkchecker emoticons advtable',
  tinydrive_token_provider: 'URL_TO_YOUR_TOKEN_PROVIDER',
  tinydrive_dropbox_app_key: 'YOUR_DROPBOX_APP_KEY',
  tinydrive_google_drive_key: 'YOUR_GOOGLE_DRIVE_KEY',
  tinydrive_google_drive_client_id: 'YOUR_GOOGLE_DRIVE_CLIENT_ID',
  mobile: {
    plugins: 'print preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link media mediaembed template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker textpattern noneditable help formatpainter pageembed charmap mentions quickbars linkchecker emoticons advtable'
  },
  menu: {
    tc: {
      title: 'TinyComments',
      items: 'addcomment showcomments deleteallconversations'
    }
  },
  menubar: 'file edit view insert format tools table tc help',
  toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist checklist | forecolor backcolor casechange permanentpen formatpainter removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media pageembed template link anchor codesample | a11ycheck ltr rtl | showcomments addcomment',
  autosave_ask_before_unload: true,
  autosave_interval: "30s",
  autosave_prefix: "{path}{query}-{id}-",
  autosave_restore_when_empty: false,
  autosave_retention: "2m",
  image_advtab: true,
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tiny.cloud/css/codepen.min.css'
  ],
  link_list: [
    { title: 'My page 1', value: 'http://www.tinymce.com' },
    { title: 'My page 2', value: 'http://www.moxiecode.com' }
  ],
  image_list: [
    { title: 'My page 1', value: 'http://www.tinymce.com' },
    { title: 'My page 2', value: 'http://www.moxiecode.com' }
  ],
  image_class_list: [
    { title: 'None', value: '' },
    { title: 'Some class', value: 'class-name' }
  ],
  importcss_append: true,
  height: 400,
  templates: [
        { title: 'New Table', description: 'creates a new table', content: '<div class="mceTmpl"><table width="98%%"  border="0" cellspacing="0" cellpadding="0"><tr><th scope="col"> </th><th scope="col"> </th></tr><tr><td> </td><td> </td></tr></table></div>' },
    { title: 'Starting my story', description: 'A cure for writers block', content: 'Once upon a time...' },
    { title: 'New list with dates', description: 'New List with dates', content: '<div class="mceTmpl"><span class="cdate">cdate</span><br /><span class="mdate">mdate</span><h2>My List</h2><ul><li></li><li></li></ul></div>' }
  ],
  template_cdate_format: '[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]',
  template_mdate_format: '[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]',
  height: 600,
  image_caption: true,
  quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
  noneditable_noneditable_class: "mceNonEditable",
  toolbar_drawer: 'sliding',
  spellchecker_dialog: true,
  spellchecker_whitelist: ['Ephox', 'Moxiecode'],
  tinycomments_mode: 'embedded',
  content_style: ".mymention{ color: gray; }",
  contextmenu: "link image imagetools table configurepermanentpen",
  /* 
  The following settings require more configuration than shown here.
  For information on configuring the mentions plugin, see:
  https://www.tiny.cloud/docs/plugins/mentions/.
  */
  mentions_selector: '.mymention',
  mentions_fetch: mentions_fetch,
  mentions_menu_hover: mentions_menu_hover,
  mentions_menu_complete: mentions_menu_complete,
  mentions_select: mentions_select,
 });

and as suggested by @VitauatsStocka, remove below code
<%= tinymce plugins: ["wordcount", "code", "anchor", "casechange", "codesample", "hr", "link", "preview"] %>.

Tinymce: Toolbar location at bottom of Editor

based on the tinyMCE documentation, you can only use
theme_modern_toolbar_location : "bottom"

when you use Advanced theme.

theme : "advanced",

Full example:

<script type="text/javascript">
// O2k7 skin
tinyMCE.init({
        // General options
        mode : "exact",
        elements : "elm1",
        theme : "advanced",
        skin : "o2k7",
        plugins : "spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",

        // Theme options
        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,
        theme_advanced_toolbar_location : "bottom"
});

</script>

<form method="post" action="dump.php">
        <textarea id="elm1" name="elm1" style="width:100%">
        </textarea>

</form>

---

Related Topics