How to configure the tinymice editor buttons?

pradeepc

You can achieve this by custom Javascript code. You will have to create a custom component and include it on the page where your tinymce editor is running. In that custom component you will have to insert javascript code in which you will have to write initialization script for tinymce. Below is the example code to add a custom "myButton" in tinymce editor. On "myButton" click it adds content in tinymce editor.

tinymce.init({
  selector: '#tinyMceEditor', // insert tinymce text editor id
  height: 500,
  toolbar: 'mybutton', // button text to be displayed
  menubar: false,
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tinymce.com/css/codepen.min.css'],
  
  setup: function (editor) {
    editor.addButton('mybutton', {
      text: 'My button',
      icon: false,
      onclick: function () {
       /* function to be performed on button click */
        editor.insertContent('&nbsp;<b>It\'s my button!</b>&nbsp;');
      }
    });
  }
});

You will have to add the corresponding text editor ID in selector  and the function to be performed on button click in onclick configuration parameter.

Hopes this helps. Please give KUDOS if you find this helpful

Thanks but didn't work for me. When I add the javascript code, some icons are showing as undefined and the new button I have added is not showing up. Please see the screenshot. Also there is no javascript error in console.

pradeepc

Please use only below code and then try:

tinymce.init({
  selector: '#tinyMceEditor', // insert tinymce text editor id
   setup: function (editor) {
    editor.addButton('mybutton', {
      text: 'My button',
      icon: false,
      onclick: function () {
       /* function to be performed on button click */
        editor.insertContent('&nbsp;<b>It\'s my button!</b>&nbsp;');
      }
    });
  }
});

If you are customizing the out of box tinymce editor of lithium default post editor then you will have to follow the exact same configuration as they are following. But that will be not be an optimal solution as you will break their configuration. What I can suggest to you is to create a custom message post functionality that will have a customized tinymce editor and will use Lithium's rest api to post message.