Tinymce custom plugin

Question

A client asked me to make a plugin to insert phone links, I know this can be done through the link plugin but he wants one specifically designed to do this. I already have the plugin with the popup window where you can insert the data you need, here is the code, what I want is to add the same functionality that has the link plugin so when the user clicks over the linked text the content can be edited inside the window manager of my plugin.

This is the code i have so far:

tinymce.PluginManager.add('phonelink', function(editor, url) {  
// Add a button that opens a window
  tinymce.DOM.loadCSS(url + '/css/phonelink.css');
  editor.addButton('phonelink', {
    text: false,
    icon: 'phonelink',
    onclick: function() {
      // Open window
      editor.windowManager.open({
        title: 'Enlace teléfono',
        body: [
          {type: 'textbox', name: 'phone', label: 'Teléfono'},
          {type: 'textbox', name: 'showtext', label: 'Texto a mostrar'},
          {type: 'textbox', name: 'title', label: 'Título'}
        ],
        onsubmit: function(e) {
          // Insert content when the window form is submitted
          editor.insertContent('<a title="' + e.data.title + '" href="tel:+34' + e.data.phone + '">' + e.data.showtext + '</a>');
        }
      });
    }
  });

  // Adds a menu item to the tools menu
  editor.addMenuItem('phonelink', {
    text: 'Teléfono',
    context: 'tools',
    onclick: function() {
      // Open window with a specific url
      editor.windowManager.open({
          title: 'Enlace teléfono',
          body: [
            {type: 'textbox', name: 'phone', label: 'Teléfono'},
            {type: 'textbox', name: 'showtext', label: 'Texto a mostrar'},
            {type: 'textbox', name: 'title', label: 'Título'}
          ],
          onsubmit: function(e) {
            // Insert content when the window form is submitted
            editor.insertContent('<a title="' + e.data.title + '" href="tel:+34' + e.data.phone + '">' + e.data.showtext + '</a>');
          }
      });
    }
  });
});

Answer 1

I finally solved it, if anyone is interested this is how i did it:

tinymce.PluginManager.add('phonelink', function(editor, url) {
    // Add a button that opens a window
    var linkText = "";
    var linkTitle = "";
    var link = "";
    tinymce.DOM.loadCSS(url + '/css/phonelink.css');
    editor.addButton('phonelink', {
        text: false,
        icon: 'phonelink',
        onpostrender: updateOnSelect,
        onclick: onClickPhoneButton
    });
    // Adds a menu item to the tools menu
    editor.addMenuItem('phonelink', {
        text: 'Teléfono',
        context: 'tools',
        onclick: onClickPhoneButton,
        onpostrender: updateOnSelect,
    });
    function onClickPhoneButton(){
        editor.windowManager.open({
            title: 'Enlace teléfono',
            body: [
                {type: 'textbox', name: 'phone', label: 'Teléfono', value: link},
                {type: 'textbox', name: 'showtext', label: 'Texto a mostrar', value: linkText},
                {type: 'textbox', name: 'title', label: 'Título', value: linkTitle}
            ],
            onsubmit: function(e) {
                // Insert content when the window form is submitted
                var hrefLink = '<a title="' + e.data.title + '" href="tel:+34' + e.data.phone + '">' + e.data.showtext + '</a>';
                if(link !== ''){
                    editor.setContent(hrefLink);
                }else{
                    editor.insertContent(hrefLink);
                }
            }
        });
    }
    function updateOnSelect() {
        var btn = this;
        editor.on('NodeChange', function (e) {
            var node = editor.selection.getNode();
            var isTelLink = node.href !== undefined && node.href.indexOf('tel:+') !== -1
            btn.active(isTelLink);
            if(isTelLink){
                link = node.href;
                link = link.replace("tel:+34", "");
                linkTitle = node.title;
                linkText = node.text;
            }
        });
    }
});

Answer 2

Maybe this will help https://www.tinymce.com/docs-3x/api/dom/class_tinymce.dom.Selection.html/

Add some class, for example, .phonelink for your element. Then with editor.selection.getNode(); you can get the contents of selected element, and if it has desired class, paste its contents into your popup form. Same changes in the submit function.

For better UI experience, you can add an onclick tooltip to your button

editor.addContextToolbar(
  '.phonelink',
  'phonelink'
);

Hope it'll help you.