Search code examples
javascriptregexeventstinymcekeyboard-events

Automatically convert two dashes into an — in TinyMCE

I'm looking for a TinyMCE plugin or other custom solution which will convert -- into — automatically. Ideally the solution would not require processing the entire TinyMCE contents on every keyPress/keyUp event, but instead only check when the user has either cut, pasted, or typed -. Right now I'm using something like the following, and it's a little slow when the TinyMCE contents are large:

tinyMCE.init({
    //...            
    setup: function (ed) {
        ed.onKeyUp.add(function(ed) {
            //find and replace two dashes with emdash
            //if there was a change, update tinymce/textarea contents
        });
    }
});

More generally, I'm curious about a fast text-processing solution for TinyMCE. I understand that there may be nothing better than the method I'm using right now, but I was just wondering if any of you guys have found a better solution. Thanks!

Solution

  • Create a custom processing function in setup

    You're on the right track and you won't need a plugin for this.

    At your most basic level just perform a .replace() in your event callback:

    tinyMCE.init({
    //...            
    setup: function (editor) {
        editor.onKeyUp.add(function (editor) {
            var content = editor.getContent({ format: 'html'});  // Get content in HTML entity encoded format

            // RegEx replacements
            content = content.replace(/--/g, '—'); // Convert two dashes into —

            // Set content of iframe editor with modified string
            editor.setContent(content, { format: 'html' });
        });
    }
});

    But you'll want to listen for the onChange event as well and, since you're replacing two characters with one, the above method will result in your cursor position shifting out of sync.

    Here is the better way:

    tinyMCE.init({
    //...            
    setup: function (editor) {
        var customProcess = function (editor) {
            var lastSelection = editor.selection.getBookmark(2, true), // Store last selection for later restoration
                content       = editor.getContent({ format: 'html'});  // Get content in HTML entity encoded format

            // RegEx replacements
            content = content.replace(/--/g, '—'); // Convert two dashes into —

            // Set content of iframe editor with modified string
            editor.setContent(content, { format: 'html' });

            // Restore selection
            editor.selection.moveToBookmark(lastSelection);
        };

        // Listen for change event
        editor.onChange.add(customProcess);

        // Listen for key up event
        editor.onKeyUp.add(customProcess);
    }
});

    See this JSFiddle for a working example.

    EDIT:

    I see now that you're looking for an alternative to the onKeyUp event. The onChange event is probably your best alternative. I don't know of any other fast-processing solutions.