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])
  });
  });
pradeepc's avatar
pradeepc
Guide

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.

him_varma's avatar
him_varma
Advisor
8 years ago

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