2

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.

0 Answers0