My own plugin stores a few short sentences from each article and I need to highlight them in the text editor so the author sees where they are and does not touch them.
The only way I found right now is using TinyMCE active editor’s search and replace function, wrapping the subject with a yellow span. I can then search and replace again and unwrap it.
<script>
jQuery( window ).load(function() {
var content = tinymce.activeEditor.getContent();
content = content.replace(
"the text to highlight",
"<span style='background: yellow;'>the text to highlight</span>"
);
tinymce.activeEditor.setContent(content);
});
</script>
Is there a better solution than undoing it on submit? How to handle if somebody alters the phrase and my unwrap function can’t find the spans?
Have you considered using the
noneditable
plugin? This allows you put an attribute on a tag that makes all child elements of that tag non-editable. You could also use CSS to style these non-editable portions in a way that makes it clear they are non-editable.https://www.tinymce.com/docs/plugins/noneditable/