Make sure to include a space before each character when entering text in TinyMCE

Question

Make sure to include a space before each character when entering text in TinyMCE

I am interested in creating a MS-Word-like system for managing non-breaking spaces before certain characters:

My goal is to automatically insert a non-breaking space before characters like ?, !, :, etc. while typing (or replace a normal space with a non-breaking one), and to add a space after characters like «, which follow French rules, for example.

Previously, I was accomplishing this in PHP before displaying the content, but it would be much more efficient to have this functionality directly in the Wysiwyg editor.

I have searched for plugins or ways to achieve this but have not been successful. Any suggestions would be greatly appreciated!

Thank you!

javascript wordpress tinymce

Answer 1

Answer №1

To incorporate a tinymce event for when a key is pressed down, modify your tinymce configuration by adding the setup parameter:

....
plugins : 'popup5, popup6,...',
setup : function(ed) {
    //assign event listener
    ed.onKeyDown.add(function onkeydown(ed, e)
    {
        // example for '@'
        if(e.charCode == 64 && evt.shiftKey)
        {
            ed.execCommand('insertHTML', false, '&nbsp;');
        }
    });
}

Answer 2

To incorporate a tinymce event for when a key is pressed down, modify your tinymce configuration by adding the setup parameter:

....
plugins : 'popup5, popup6,...',
setup : function(ed) {
    //assign event listener
    ed.onKeyDown.add(function onkeydown(ed, e)
    {
        // example for '@'
        if(e.charCode == 64 && evt.shiftKey)
        {
            ed.execCommand('insertHTML', false, '&nbsp;');
        }
    });
}

Make sure to include a space before each character when entering text in TinyMCE

Answer №1

Similar questions

Transforming the appearance of the menu element in Vue using transitions

Different ways to tag users with the "@" symbol in Django

The timer functionality in the Angular 2+ component is malfunctioning

A different approach for dynamically displaying React components sourced from an API

Real-time chat system using PHP for one-on-one inquiries with server-sent events (not a group chat)

Generating an image in Fabric.js on a Node server following the retrieval of canvas data from a JSON

Enhancement from the original JavaScript class framework created by John Resig

What occurs when Render() is called during animation in React?

Converting JSON DateTime objects to local time in JQuery without considering timezones

The TypeScript error message reads: "You cannot assign type 'undefined' to type 'ReactElement'."

Angular animation triggered when a specific condition is satisfied

Error: The variable "deleted1" is not declared and cannot be used on the HTML button element's onclick

The aspect ratio of an image is being calculated by loading the image twice

Instructions on utilizing module.exports to export an async function

The pdfkit library seems to have an issue where it is failing to properly embed images within the

What could be the reason for the variable failing to update inside a for loop in JavaScript?

Filter prices (minimum and maximum) using a dropdown menu in asp.net core

Difficulty with BCRYPT retrieving information from MySQL

Exploring Fetch API with Promise.all

Guide to custom sorting and sub-sorting in AngularJS