Anchors visibility

7 posts, 0 answers
  1. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 16 Dec 2010 Link to this post

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

    They seem to be always hidden.

    BR,
    Marc
  2. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 16 Dec 2010 Link to this post

    Hi Marc,

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

    Greetings,
    Rumen
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 16 Dec 2010 Link to this post

    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;
    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
  5. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 21 Dec 2010 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  6. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 22 Dec 2010 Link to this post

    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
  7. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 03 Jan 2011 Link to this post

    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
  8. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 03 Jan 2011 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017