[FR] Making the plugin configurable for suggesting attributes

[Aybee]

Hello Gagaro, thank you for this plugin.

Now I want to suggest some values to be shown if not available.

I read your code and learned something about coding tinymce plugins. I've modified your code so it fullfills my needs so far.

(function(){

tinymce.PluginManager.add('editattributes', function(editor) {
  function showDialog() {
    var selectedNode = editor.selection.getNode(),
        body = [],
        // There are some unwanted attributes in the popup - don't show them
        unwantedAttributes = ['data-mce-href'],
        // Suggest some attributes
        suggestedAttributes = {
          'data-event': {
            value: '',
            prefix: 'GA: '
          },
          'data-description': {
            value: '',
            prefix: 'GA: '
          },
          'data-parameter': {
            value: '',
            prefix: 'GA: '
          }
        };


    // Show availabe attributes except unwanted and suggested
    for (var i = 0, j = selectedNode.attributes.length; i < j; i++) {
      var attribute = selectedNode.attributes[i],
          attributeName = attribute.name;

      // Not the unwanted
      if(unwantedAttributes.includes(attributeName)) {
        continue;
      };

      // Not the suggested. But give them the value if available
      if(suggestedAttributes[attributeName]) {
        suggestedAttributes[attributeName].value = attribute.value;
        continue;
      };

      body.push({
        type: 'textbox',
        name: attribute.name,
        size: 40,
        label: attribute.name,
        value: attribute.value
      });
    }


    // Show suggested attributes
    for(var key in suggestedAttributes) {
      body.push({
        type: 'textbox',
        name: key,
        size: 40,
        label: suggestedAttributes[key].prefix + key,
        value: suggestedAttributes[key].value
      });
    }


    // New attribute field
    body.push({
      type: 'container',
      label: 'New attribute',
      layout: 'flex',
      direction: 'row',
      align: 'center',
      spacing: 5,
      items: [
        {name: 'mce_new_name', type: 'textbox', ariaLabel: 'Name'},
        {name: 'mce_new_value', type: 'textbox', ariaLabel: 'Value'},
      ]
    });


    editor.windowManager.open({
      title: 'Edit Attributes',
      body: body,
      onsubmit: function(e) {
        editor.undoManager.transact(function() {
          var new_name = e.data['mce_new_name'];
          var new_value = e.data['mce_new_value'];

          delete e.data['mce_new_name'];
          delete e.data['mce_new_value'];

          if (new_name.length > 0) {
            e.data[new_name] = new_value;
          }
          for (key in e.data) {
            editor.dom.setAttribs(selectedNode, e.data);
          }
        });
      }
    });
  }

  //editor.addCommand('mceEditAttributes', showDialog);

  editor.addButton('editattributes', {
    icon: 'anchor',
    tooltip: 'Edit Attributes',
    onclick: showDialog
  });

  editor.addMenuItem('editattributes', {
    icon: 'anchor',
    context: 'edit',
    text: 'Edit Attributes',
    onclick: showDialog
  });
});

}());

Do you know how we can make this configurable so we do not need to put the attribute suggestions hardcoded into the plugin.js?

How do you like the idea of attribute suggestions. Here I want to set data-attributes for links that should get tracked with Google Analytics (GA).

[Gagaro]

Hi and thanks for the suggestion. I like it. I'm not really a TinyMCE developer though, I just did this plugin because I needed it for one of my project.

I advise you to look at other TinyMCE plugins to find out how it works, because the documentation isn't really helpful...

For example this smiley plugin has a customizable setting.

If you do a PR with your feature, I'll gladly review and merge it.

[Gagaro]

You can also look at the tinymce plugin before they were converted to typescript: https://github.com/tinymce/tinymce/tree/4.5.8/js/tinymce/plugins

[Aybee]

Thank you for your reply and hints. Then I think I will come back with a pull request when I figured out how to set up the settings feature.