Make TinyMCE "Context-Toolbar" Customizable

Question

I am trying to customize context-toolbar which existing in editor area:

• I want "CONTENT" to editible as like other elements, but TinyMCE is not allowing me to that, it always show me up that "Edit/Remove" context-toolbar,
• And I want to assign that "Edit" function to another element which will be showing my custom popup menu,

There is no information about it even in TinyMCE website,

How to customize that toolbar?

Answer 1

In Tinymce Init function, add a context toolbar to the required dom element and add custom buttons, like below:

tinymce.init({
         selector: '#main'
         , setup: function (main) {                
            main.addContextToolbar('span#content', 'editContent | deleteContent');//first parameter is the selector and second is a list of custom buttons list separated by pipe
            main.addButton('editContent', {
               icon: 'fa fa-pencil' //using font-awesome icons
               , tooltip: "Edit"
               , onclick: function (e) {
                  //Logic to make the content editable.
               }
            });
            main.addButton('deleteContent', {
               icon: 'fa fa-close' //using font-awesome icons
               , tooltip: "Delete"
               , onclick: function (e) {
                  //Logic to delete the content.
               }
            });
        }
    });