Forum Discussion

pradeepc's avatar
pradeepc
Guide
8 years ago

How to configure the tinymice editor buttons?

This article: https://community.lithium.com/t5/General-system-setup/Configure-which-buttons-appear-in-the-message-editor/ta-p/218926 says, we can configure the tiny mice editor buttons but not sure h...
  • pradeepc's avatar
    pradeepc
    8 years ago

    him_varma So I accomplished this by moderately hack way

    tinymce.on('AddEditor', function(e){
  e.editor.on('init', function(){
    tinymce.ui.Factory.create({
      type: 'button',
      icon: 'codesample'
    }).on('click', function(){
      // button pressing logic
      e.editor.selection.setContent('<code>' + e.editor.selection.getContent() + '</code>');
    })
    .renderTo($(e.editor.editorContainer).find('.mce-container-body .mce-toolbar:last .mce-btn-group > div')[0])
  });
  });
him_varma's avatar
him_varma
Advisor

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.

pradeepc's avatar
pradeepc
Guide
8 years ago

him_varma So I accomplished this by moderately hack way

tinymce.on('AddEditor', function(e){
  e.editor.on('init', function(){
    tinymce.ui.Factory.create({
      type: 'button',
      icon: 'codesample'
    }).on('click', function(){
      // button pressing logic
      e.editor.selection.setContent('<code>' + e.editor.selection.getContent() + '</code>');
    })
    .renderTo($(e.editor.editorContainer).find('.mce-container-body .mce-toolbar:last .mce-btn-group > div')[0])
  });
  });