I am working on some sort of marking selected text and annotation tool for text documents, in TinyMCE editor. I made it work by wrapping selected text in s but when the text contains some nested HTML it often breaks. I tried to make a workaround using a rangy library which has a highlighter module, that does exactly what I need, and even though I can make it work on the regular page I can't seem to get it working in TinyMCE.
Here is the sample code:
<script>
$(document).ready(function(){
tinymce.init({
selector : 'textarea',
//content_css : "css/tinymcecss.css",
setup : function(editor){
editor.on('init', function(event)
{
var iframeMce = $('#mce_0_ifr')[0];
rangy.init();
highlighter = rangy.createHighlighter(iframeMce);
highlighter.addClassApplier(rangy.createClassApplier("highlight", {
ignoreWhiteSpace: true,
tagNames: ["span", "a"]
}));
$('#sl-highlight').on('click', function(){
var selection = rangy.getSelection(iframeMce);
highlighter.highlightSelection('highlight', {
selection : selection,
exclusive : true
});
});
});
}
});
});
What I managed to find out is that I have to pass iframe selector as a parameter when creating highlighter module. and passing selection as a parameter for highlight selection function, but it doesn't work I get the error 'TypeError: Argument 1 of Range.setStart is not an object.' I tried passing TinyMCE's selection as selection object, but that doesn't work as well.
Any ideas???
Update: As a matter of fact it won't work regardless of TinyMCE. I tried the same thing with just one paragraph in iframe and I get the same error as before.