Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
[WordPress] Through a combination of the TinyMCE API and the HTML5 mark tag, here's how you can highlight text in the WordPress editor.
init: function( ed, url ) {
ed.addButton( 'highlight', {
title: 'Highlight Text',
cmd: 'highlight',
image: url + '/img/highlighter.png'
});
}
ed.addCommand( 'highlight', function() {
var markOpen = '<mark>',
markClose = '</mark>',
highlight = markOpen + ed.selection.getContent() + markClose;
ed.focus();
ed.selection.setContent(
markOpen + ed.selection.getContent() + markClose
);
});
ed.addCommand( 'highlight', function() {
var markOpen = '<mark>',
markClose = '</mark>',
highlight = markOpen + ed.selection.getContent() + markClose;
ed.focus();
/* Determine if there is highlighted text.
* If so, remove it; otherwise, highlight it.
*/
if ( -1 < ed.getContent().indexOf( highlight ) ) {
ed.setContent(
ed.getContent().replace( highlight, ed.selection.getContent() )
);
} else {
ed.selection.setContent(
markOpen + ed.selection.getContent() + markClose
);
}
});
<?php
add_action( 'admin_init', 'acme_add_editor_style' );
/**
* Adds a stylesheet to provide styling the for WordPress Editor
*
* @since 1.0.0
*/
function acme_add_editor_style() {
add_editor_style( get_template_directory_uri() . '/assets/css/editor-style.css' );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment