How to pass in selected content as a variable to TinyMCE style_formats

TinyMCE has a way of passing in variables to use in conjunction with the formats and style_formats code:

// Registering the special format with a variable
tinymce.activeEditor.formatter.register('custom_format', {inline : 'span', styles : {color : '%value'}});

// Applying the specified format with the variable specified
tinymce.activeEditor.formatter.apply('custom_format', {value : 'red'});

How can I extend the behaviour of the built in styleselect to add some useful helper variables? In particular I want access to the selected text the style is being applied to eg:

Read More
// Registering the special format with a variable
tinymce.activeEditor.formatter.register('custom_format', {inline : 'span', attributes : {data-content : '%content'}});

// Applying the specified format with the variable specified
tinymce.activeEditor.formatter.apply('custom_format', {content : tinymce.activeEditor.selection });

I can see how you’d do this via custom buttons but I’d like it to be integrated with styleselect as it will make it easier to work with in WordPress.

Can any JS experts point me in the right direction? I still struggle a bit with OO style javascript and what exactly can be achieved.

Related posts

Leave a Reply