Question

Good Afternoon people,

i am working with CKEDITOR and JQuery i need know how when i load a html info CKEDITOR move the editor to an anchor into html.

for example:

i was loaded an URL data like:

http://example.com/Books/newbook/html/Text/CR!SZ3H2DP1BD2MFEK9AMDKXC1TEQZT_split_011.html

i need that the editor show to me the content pointing to #filepos91625 anchor section.

this is part of my code:

var editor = $('#xhtml').ckeditorGet();
editor.config.baseHref = response.css;
var url = response.path + block;
editor.setData(response.content);

/* I NEED HERE CODE TO POINT TO ESPECIFIC ANCHOR SECTION INTO HTML EDITOR */ 

thanks so much, i really appreciate the help

Answer 1

Assuming you have something like this:

<textarea cols="80" id="xhtml" rows="10">
<a href="#l001">Line 1</a><br />
<a href="#l002">Line 2</a><br />
<a href="index.html#filepos91625">Line 3</a><br />
    ...
<a href="#l038">Line 38</a><br />
</textarea>

and you want ckeditor to go to href containing “#filepos91625”, use the following code:

$('#xhtml').ckeditor( function() { 
            var tags = document.getElementById('cke_contents_xhtml').firstChild.contentWindow.document.getElementsByTagName("a");
            for (var i = 0; i < tags.length; i++)
            {
                if (tags[i].href.indexOf('#filepos91625')!=-1) {
                                document.getElementById('cke_contents_xhtml').firstChild.contentWindow.scrollTo(0, tags[i].offsetTop);
                }
            }

            } );

This is a mix between jquery and normal javascript, but it should work this way – jquery cannot be used inside the iframe anyway.The callback handler of CKEDITOR iterates over the href elements and looks for a link with the hashtag #filepos91625, and when it gets found scrolls to the offset position of the tag inside the iframe.