Adding a custom element to TinyMCE RTE

Development
1

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

2

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
3

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
4

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
5

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.

6

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”.

7

Following up on this, I’m trying to add a new field to this and it’s not working for some reason.

In plugin.min.js, I added {type: 'textbox', name: 'button', label: 'Button Text'}, to the body in order to add a new field to the window. But nothing changes.

Even the output is the same as before. Despite amending the function like so:

editor.insertContent('[[download? &thumb=’ + e.data.image_path + ’ &file=’ + e.data.file_path + ’ &button=’ + e.data.button + ’ &alt=’ + e.data.text + ']]');

is there something else I need to clear to get this to work? I’ve tried clearing the site cache and nothing happened either.

Thanks

8

Have you tried clearing the cache of your browser?