TinyMCE: Shortcut [Ctrl] + [Shift] + [Space] to insert non-breaking spaces

[AK-CCM]

Is your feature request related to a problem? Please describe.

If I want to insert a non-breaking space   in the editor I have to click on the icon in the toolbar or choose the menu item in the Edit menu. This is cumbersome and interrupts the flow of writing every time.

Describe the solution you'd like

It would be great if non-breaking spaces could easily inserted by the shortcut [Ctrl] + [Shift] + [Space] like in Microsoft Word or LibreOffice Writer.

Additional context

https://www.tiny.cloud/docs/tinymce/latest/shortcuts/

[AK-CCM]

In the tiny docu I found some infos about howto add custum shortcuts. Unfortunately, I am already failing to get the shortcut ctrl + shift + spacebar in the example to work: https://codepen.io/AK-CCM/pen/wBwmdbg.

[brianteeman]

the demo on that page for inserting a username doesnt work either. Not sure what anyone at joomla can do to help you with that. You should contact tinymce

[AK-CCM]

I've saved these lines (ChatGPT helped me and in CodePen it works) in plugin.js and uploaded the file to /home/www/.../media/plg_editors_tinymce/js/plugins/shortcut-nonbreaking

tinymce.PluginManager.add('shortcut-nonbreaking', function(editor) {
// Add a custom keyboard shortcut
editor.addShortcut('meta+shift+9', 'Add a non-breaking space', function() {
// Insert a non-breaking space at the current cursor position
editor.execCommand('mceInsertContent', false, '<span class="mce-nbsp-wrap mce-nbsp" contenteditable="false"> </span>');
});
});

After that I've added in the tinymce plugin at External Plugin URLs:
Plugin Name: shortcut-nonbreaking
Path: /media/plg_editors_tinymce/js/plugins/shortcut-nonbreaking

After saving changes I cleared the cache, opened an article, clicked in the editor and tried to insert a nbsp with Ctrl + Shift + 9. But nothing happens.

Did I made the plugin implementation correct?

[brianteeman]

try
Path: /media/plg_editors_tinymce/js/plugins/shortcut-nonbreaking/plugin.min.js

[AK-CCM]

thx4hint! I've forgotten the file in the path.

Here's my actual plugin.js – it works fine to insert a nbsp with ctrl + shift + 9:

tinymce.PluginManager.add('shortcut-nonbreaking', function(editor) {
// Add a custom keyboard shortcut: ctrl + shift + 9
editor.addShortcut('ctrl+shift+9', 'Insert nonbreaking space at cursor position or selection', function() {
// Insert a nonbreaking space using TinyMCE's command
tinymce.activeEditor.execCommand('mceNonBreaking');
});
});

But if I change the key combination to ctrl+shift+space nothing happens when I press ctrl + shift + spacebar.

[AK-CCM]

These lines work fine:

tinymce.PluginManager.add('shortcut-nonbreaking', function(editor) {
    // Listen for the keydown event to capture Ctrl + Shift + Spacebar
    editor.on('keydown', function(e) {
        // Check if Ctrl, Shift, and Spacebar are pressed simultaneously
        if (e.ctrlKey && e.shiftKey && e.key === ' ') {
            e.preventDefault(); // Prevent the browser from handling the Spacebar normally
            editor.execCommand('mceNonBreaking'); // Insert a non-breaking space
        }
    });
});

Perhaps this functionality could be merged to Joomla?
I've attached the zipped plugin.js, plugin.min.js and plugin.min.js.gz.

shortcut-nonbreaking.zip

[AK-CCM]

If any docu/howto is needed:

Description: This small plugin adds a keyboard shortcut to TinyMCE to insert a non-breakable space   at the cursor position or selection with the key combination Ctrl + Shift + Space bar - as you know it from Microsoft Word and LibreOffice Writer.

Step 1: Download the archive shortcut-nonbreaking.zip from the issue on Github.

Step 2: Unzip the ‘shortcut-nonbreaking’ folder which containing the plugin files and upload it to the /media/plg_editors_tinymce/js/plugins directory.

Step 3: Open the settings of the TinyMCE plugin (System > Manage: Plugins > Editor - TinyMCE) and include the plugin at ‘External Plugin URLs’:

• Plugin name: shortcut-nonbreaking
• Path: /media/plg_editors_tinymce/js/plugins/shortcut-nonbreaking/plugin.min.js.gz (or the file plugin.min.js if gzip compression is not supported)

Don't forget to save and clear the cache (System > Maintenance: Clear Cache).

[AK-CCM]

If this feature can be merged to Joomla, the docu could be changed as below:

English language

• Before: A list of available keyboard shortcuts (pc, mac) within the editor body.

• After: A list of available keyboard shortcuts (pc, mac) within the editor body plus the additional key combination Ctrl + Shift + Space to insert a non-breaking space   at the current cursor position or selection.

German language

• Before: Die verfügbaren Tastaturkürzel (PC, Mac) für den Beitragsinhalt (en).

• After: Die verfügbaren Tastaturkürzel (PC, Mac) für den Beitragsinhalt (en) sowie die zusätzliche Tastenkombination Strg + Umschalt + Leertaste zum Einfügen eines geschützten Leerzeichens   an der aktuellen Cursor-Postion oder Auswahl.

[AK-CCM]

https://github.com/AK-CCM/shortcut-nbsp/tree/main