Adding a custom element to TinyMCE RTE

I put together a snippet that would make adding inline downloads easier from within the content editor. How can I add this as a more visual option from within the TinyMCE RTE extra?

My snippet looks something like this:

[[download? 
   &thumb=`path to image` 
   &file=`path to file` 
   &alt=`text here`
]]

Is it possible to add a custom menu item with visually friendly fields that output this snippet?

thanks

Theoretically it should be possible to create a custom plugin in the directory assets/components/tinymcerte/js/vendor/tinymce/plugins.

  • Add a new folder download
  • Create a new file in this folder named plugin.min.js that contains the plugin code. Something like this:
tinymce.PluginManager.add('download', function(editor, url) {
    // Add a button that opens a window
    editor.addButton('download', {
        text: 'Download',
        icon: false,
        onclick: function() {
            // Open window
            editor.windowManager.open({
                title: 'Download',
                body: [
                    {type: 'filepicker', filetype: 'image', name: 'image_path', label: 'path to image'},
					{type: 'filepicker', filetype: 'file', name: 'file_path', label: 'path to file'},
					{type: 'textbox', name: 'text', label: 'text here'}
                ],
                onsubmit: function(e) {
                    // Insert content when the window form is submitted
                    editor.insertContent('[[download? &thumb=`' + e.data.image_path + '` &file=`' + e.data.file_path + '` &alt=`' + e.data.text + '`]]');
                }
            });
        }
    });
});
  • Go to the system settings and add the string download to the settings tinymcerte.plugins and tinymcerte.toolbar1 (or tinymcerte.toolbar2).

But this new plugin probably gets deleted every time you update the “TinyMCE RTE” extra.

2 Likes

OMG thank you! I was not expecting a full breakdown like that at all! That worked perfectly. I only now want to try and figure out if I can put this under the insert menu or how to change Download to an icon of some kind.

Thank you so much!

1 Like

To put this under the insert menu, you have to use editor.addMenuItem() instead of editor.addButton() and define insert as the context:

editor.addMenuItem('download', {
	text: 'Download',
	icon: 'template',
	context: 'insert',
	onclick: function() {
		// the same code as before
	}
});

To show an icon on the button instead of just the text, set the icon property to a value and delete the text property

...
icon: 'template',
tooltip: 'Download',
...

or use the image property instead for a custom image.

image: tinymce.baseURL + '/plugins/download/my_icon.png',
1 Like

That worked great! Thanks.

Do you know if there is a hover property for the image? Specifically for the insert menu. I’m probably being a little too meticulous here but, I want the icon to flip to white when hovered over like the others in that menu do.

The other icons in the menu are glyphs from a webfont. That is why they change their color when the text color changes.

If you want the same effect, you probably have to change the css file (or add your own in a plugin) and use an icon-font like “Font Awesome”.