Classic Editor / TinyMCE – How to automatically insert Non-Breaking Space using Ctrl + Shift + Space

A non-breaking space allows you to add a space between two words that prevents an automatic line break (line wrap) at its position.

They’re commonly used where amounts, such as dollars are separated using a space or when typing a brand name.

When using Microsoft Word it’s as easy as typing Ctrl + Shift + Space – but it’s not at easy in an HTML WYSIWYG editor such as in WordPress.

However, with the following PHP filter you can make TinyMCE (also known as “Classic Editor” — NOT the new Gutenberg editor) automatically create a non-breaking space when using the Ctrl + Shift + Space key combination.

If you’re not sure where to place this code I highly recommend you read How to create a WordPress plugin for your custom functions.

function itsg_tinymce_nbsp( $settings ) {
$settings['setup'] = <<<JS
[function(editor) {
var down = {};
editor.onKeyDown.add( function( editor, event ) {
down[event.keyCode] = true;
});
editor.onKeyUp.add( function( editor, event ) {
if ( down[16] && down[17] && down[32] ) {
editor.execCommand( 'mceInsertContent', false, '&nbsp;' ); // inserts non-breaking space
}
down[event.keyCode] = false;
});

}][0]
JS;
$settings['entities'] = '160,nbsp,38,amp,60,lt,62,gt'; 
$settings['entity_encoding'] = 'named';
return $settings;
}
add_filter( 'tiny_mce_before_init', 'itsg_tinymce_nbsp' );

Was this article helpful?

Related Articles