Anchors visibility

[Fit2Page]

How can I make anchors on a page visible in the Design Mode?

They seem to be always hidden.

BR,
Marc

[Rumen]

Hi Marc,

Please, see the following KB article: Making named anchors visible in editing area.

Greetings,
Rumen
the Telerik team

[Fit2Page]

Thanks for the link Rumen.

Now I have the following in ClientLoad:

function OnClientLoad(editor, args)
{
editor.get_contentArea().className = "Inhoud";

//de taal is nodig voor de rewrite selectie
var pos = editor.get_id().lastIndexOf("_")
var Taal = editor.get_id().substring(pos+1,pos+3)
editor.get_dialogOpener().set_additionalQueryString("&Taal=" + Taal);

//bij drag en drop en cut/paste worden de paden van de plaatjes aangepast;deze worden hier weer gestript;
var pathsToStrip = ["http://web1.insight5.nl","http://web2.insight5.nl","http://web1:8001","http://insight.vme.nl","http://insight.cat-iq.org","http://insight.dect.org","http://insight.rokarent.nl","http://insight.sightways.nl"];
editor.get_filtersManager().add(new PathFilter(pathsToStrip));

//start
       editor.get_filtersManager().add(new AnchorFilter());
       var links = editor.get_document().getElementsByTagName("A");
       for (var i=0; i< links.length; i++)
       {
           var link = links[i];
           if (link && link.getAttribute("NAME"))
           {
                link.style.backgroundColor = "yellow"; //here you can set per your choice backgroundImage or className attribute
           }
       }  //end
}

PathFilter = function(pathsToStrip) {
    PathFilter.initializeBase(this);
    this.set_isDom(true);
    this.set_enabled(true);
    this.set_name("Path filter");
    this.set_description("Path filter");
    this._pathsToStrip = pathsToStrip;
}
PathFilter.prototype =
{
    getDesignContent: function(content) {
        this._updateElements(content, "IMG", "src");
        return content;
    },
    getHtmlContent: function(content) {
        this._updateElements(content, "IMG", "src");
        return content;
    },
    _getElements: function(content, tagName) {
        var result = content.getElementsByTagName(tagName);
        if (!result) result = content.ownerDocument.getElementsByTagName(tagName);
        return result;
    },
    _updateElements: function(content, tagName, attrName) {
        var elements = this._getElements(content, tagName);
        for (var i = 0; i < elements.length; i++) {
            var elem = elements[i];
            var attrValue = $telerik.isIE ? elem.getAttribute(attrName, 2) : elem[attrName];
            for (var j = 0; j < this._pathsToStrip.length; j++) {
                var toRemove = this._pathsToStrip[j];
                attrValue = attrValue.replace(toRemove, "");
            }
            elem.setAttribute(attrName, attrValue);
        }
    }
    }
PathFilter.registerClass('PathFilter', Telerik.Web.UI.Editor.Filter);


//filter om de ankers zichtbaar te maken in Design mode


    AnchorFilter = function()
    {
       AnchorFilter.initializeBase(this);
       this.set_isDom(false);
       this.set_enabled(true);
       this.set_name("Anchor filter");
       this.set_description("Anchor filter");
    }
    AnchorFilter.prototype =
    {
       getHtmlContent : function(content)
       {
         var oDiv = document.createElement("DIV");
            oDiv.innerHTML = content;
            var links = oDiv.getElementsByTagName("A");
            for (var i=0; i< links.length; i++)
            {
               var link = links[i];
               if (link && link.getAttribute("NAME"))
               {
                    link.style.backgroundColor = "";
               }
            }
            return oDiv.innerHTML;
       },

       getDesignContent : function(content)
       {
            var oDiv = document.createElement("DIV");
            oDiv.innerHTML = content;
            var links = oDiv.getElementsByTagName("A");
            for (var i=0; i< links.length; i++)
            {
               var link = links[i];
               if (link && link.getAttribute("NAME"))
               {
                    link.style.backgroundColor = "yellow"; //here you can set per your choice backgroundImage or className attribute
               }
            }
            return oDiv.innerHTML;
       }
}

AnchorFilter.registerClass('AnchorFilter', Telerik.Web.UI.Editor.Filter);
//

The block contains two filters now. The filter for the Anchors is not working the other is OK.
Is there something I am missing?

Thanks for your support.
Marc

[Dobromir]

Hi Mark,

I have tested the provided code and it is working on my side - both content filters are executed. I have attached my test page, could you please modify it to a point where the second custom content filter stop and send it back so we can investigate it further.

Regards,
Dobromir
the Telerik team

[Fit2Page]

Hi Dobromir,

Actually this is working on my side.
I thougt no inner text was needed for the anchor so I had in the HTML content of the editor:

<a name="telerik"></a>

Instead of

<a name="telerik">telerik</a>

Thanks for giving me the pointer.

Marc

[Fit2Page]

Hi Dobromir,

I have one more question about the Path stripper code which I sent you earlier in this thread.

The PathFilter function is not working properly in IE Compatibility View.
Do you have a clue why not?

Thanks,
Marc

[Dobromir]

Hi Marc,

Actually the problem occurs because of the AnchorFilter. The filter is not a DOM filter and it is executed after the PathFilter. The reason for this problem to occur is due to the way that AnchorFilter is manipulating the content. When setting innerHTML property to the newly created <div> element the src attribute of the image is converted to absolute path, this is modification is not applied by RadEditor but is a standard behavior of Internet Explorer 7 and prior versions.

To fix this issue I suggest you to modify the AnchorFilter to be a DOM filter and manipulate only the anchor elements of the editor's content, e.g.:

AnchorFilter = function ()
{
    AnchorFilter.initializeBase(this);
    this.set_isDom(true);
    this.set_enabled(true);
    this.set_name("Anchor filter");
    this.set_description("Anchor filter");
}
AnchorFilter.prototype =
{
    getHtmlContent: function (content)
    {
        var links = content.getElementsByTagName("A");
        for (var i = 0; i < links.length; i++)
        {
            var link = links[i];
            if (link && link.getAttribute("NAME"))
            {
                link.style.backgroundColor = "";
            }
        }
        return content;
    },

    getDesignContent: function (content)
    {
        var links = content.getElementsByTagName("A");
        for (var i = 0; i < links.length; i++)
        {
            var link = links[i];
            if (link && link.getAttribute("NAME"))
            {
                link.style.backgroundColor = "yellow"; //here you can set per your choice backgroundImage or className attribute
            }
        }
        return content;
    }
}

AnchorFilter.registerClass('AnchorFilter', Telerik.Web.UI.Editor.Filter);

For your convenience I have modified the filter and attached the modified sample page.

Regards,
Dobromir
the Telerik team