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 how to do that from admin.

I would like to add a button for code tag(<code></code>) in my edotor, does anyone know how to do this?

 

  • 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
    8 years ago

    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

    • pradeepc's avatar
      pradeepc
      Guide
      8 years ago

      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.