[Solved] Updating links with Document Manager overwriting attributes

[Gavin Pollock]

Hi there,

When using the Document Manager to insert links to documents, sometimes we want to update an existing link in the content also. When you position the cursor over a hyperlink and select a new document with the Doc Mgr, the default behaviour overwrites the entire A structure with a simple A tag. Some of our links have CSS Classes attached, an image as part of the link, etc.

Is there any solution to make this slightly more intelligent when updating an existing link?

Thanks
Gavin

[Gavin Pollock]

Hi guys,

Any update on this? Should I log this as a support request?

Cheers
Gavin

[Lini]

Hello Gavin,

Which version of the editor are you using? I tried your scenario on our demos site but the class attribute of links is preserved when changing the link URL via the Document Manager.

In any case, if you are using a more recent version of the RadControls, you can try updating the link from the Link Manager dialog instead: right-click on the link and choose properties, then from the link manager you can open the document manager dialog and update just the URL. The only problem I see with this is you need to open two dialogs.

Best wishes,
Lini
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Gavin Pollock]

Hi Lini,

We are running Q3 2008, sorry should have said. Yes, I can see the new version has this in it. Updating the link through link manager would be a perfectly acceptable solution. It's actually more than a class, it's the image in it that gets removed also if you do it directly (altho this seems to be fixed in the new version also).

We actually have a customised EditorDialog for the Link Manager already, would it be fairly simple to add in the Doc Manager link in our current version? We would like to avoid a full control upgrade as we are using the package extensively across our site, and it's really only this we need for now.

Cheers
Gavin

[Lini]

Hi Gavin,

Here is a JavaScript workaround that should work in the version you have and fix the problem when updating a link from the Document Manager:

<script type="text/javascript">
    Telerik.Web.UI.Editor.CommandList.DocumentManager = function(commandName, editor, commandArgs)
    {
        var dialogName = commandName == "DocumentManager" ? "DocumentManager" : "LinkManager";
        var argument = Telerik.Web.UI.Editor.CommandList._getLinkArgument(editor);
        Telerik.Web.UI.Editor.CommandList._getDialogArguments(argument, "A", editor, commandName);

        var callbackFunction = Telerik.Web.UI.Editor.CommandList.getCallbackFunction(commandArgs, function(sender, args)
        {
            if (dialogName == "DocumentManager" && argument.realLink && argument.realLink.innerHTML)
            {
                //just update the link URL
                argument.realLink.setAttribute("href", args.Result.getAttribute("href", 2));
                editor.pasteHyperLink(argument.realLink, commandName);
            }
            else
            {
                editor.pasteHyperLink(args.Result, commandName);
            }
        });
        editor.showDialog(dialogName, argument, callbackFunction);
        return false;
    };
</script>

Put the above script after the script manager control on the page so it can override the default RadEditor script for the document manager.

Best wishes,
Lini
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Gavin Pollock]

Hi,

I can see this is almost working, but it looks like the editor.pasteHyperlink is still changing it slightly.

A tag before opening Doc Mgr:

<a href="#" class="readmore" title="Read more link"><strong>Read More</strong><img alt="Read More" src="/Assets/Images/Icons/icon_arrow_mid.png" longdesc="Read More" /></a>

A tag after link is updated:

<a href="#" class="readmore" title="Read more link"></a><a href="http://localhost:55026/IMWeb/Assets/Docs/Publication.pdf" class="readmore" title="Read more link" originalPath="/IMWeb/Assets/Docs/Publication.pdf" originalAttribute="href">Read More</a>

I have put window.alerts in and the code is getting to the right place with what looks like the correct parameters. Any ideas?

Cheers
Gavin

[Lini]

Hello Gavin,

Try changing the line

editor.pasteHyperLink(argument.realLink, commandName);

in the code I gave you to:

editor.pasteHyperLink(argument.realLink, "LinkManager");

This should fix the problem you are experiencing with the pasteHyperlink function.

Sincerely yours,
Lini
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Gavin Pollock]

Hi Lini,

Almost there! It's still slightly confused I think though... HTML before:

<a href="#" class="readmore" title="Read more link"><strong>Read More</strong><img alt="Read More" src="/Assets/Images/Icons/icon_arrow_mid.png" longdesc="Read More" /></a>

And then I select the A tag using the element inspector (not sure that makes a difference), and change the link using the Doc Mgr

<a href="#" class="readmore" title="Read more link"></a><a href="http://localhost:55026/IMWeb/Assets/Docs/Publication.pdf" class="readmore" title="Read more link" originalPath="/IMWeb/Assets/Docs/Publication.pdf" originalAttribute="href"><strong>Read More</strong><img alt="Read More" src="/imweb/Assets/Images/Icons/icon_arrow_mid.png" longdesc="Read More" /></a>

It seems to actually add in an extra A tag before hand (or at least leave the original A tag and insert a new one after). But the new A tag is perfectly structured (not sure about the original... attributes)!

Thanks
Gavin

[Lini]

Hi Gavin,

Could you send me your RadEditor tag declaration? The problem could be related to some properties you set (the control configuration).

All the best,
Lini
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Gavin Pollock]

_editor = new RadEditor();
_editor.ID = "ed";
_editor.SkinID = "Default";
plcContent.Controls.Add(_editor);
_editor.Height = Height;
_editor.Width = Width;
_editor.Skin = "WebBlue";

//ENABLE FILTERS
_editor.EnableFilter(EditorFilters.FixUlBoldItalic);
_editor.EnableFilter(EditorFilters.IECleanAnchors);
_editor.EnableFilter(EditorFilters.MozEmStrong);
_editor.EnableFilter(EditorFilters.ConvertFontToSpan);
_editor.EnableFilter(EditorFilters.IndentHTMLContent);
_editor.EnableFilter(EditorFilters.EncodeScripts);
//DISABLE FILTERS
_editor.DisableFilter(EditorFilters.RemoveScripts);
_editor.DisableFilter(EditorFilters.FixEnclosingP);

Thanks for your help with this Lini. The RadEditor is added through the code behind just after Page_Load

Here is the SkinID from App_Themes

<telerik:radeditor runat="server" SkinId="Default" FocusOnLoad="false"
    Editable="true" SaveInFile="false" EditModes="Design, Html" NewLineBr="False"
    StripFormattingOptions="MSWordRemoveAll" ToolbarMode="PageTop" ToolsHeight="70px"
    ExternalDialogsPath="~/RadControls/EditorDialogs" StripAbsoluteImagesPaths="true" StripAbsoluteAnchorPaths="true">

    <Languages>
        <telerik:SpellCheckerLanguage Code="en-GB" Title="English" />
    </Languages>

    <CssFiles>
        <telerik:EditorCssFile Value="~/_resources/contentstyles.css" />
    </CssFiles>

    <ImageManager
    ViewPaths="~/Assets/Images/"
    UploadPaths="~/Assets/Images/"
    DeletePaths="~/Assets/Images/"
    />
    <FlashManager
    ViewPaths="~/Assets/Media/"
    UploadPaths="~/Assets/Media/"
    DeletePaths="~/Assets/Media/"
   MaxUploadFileSize="31457280"
    />
    <MediaManager
    ViewPaths="~/Assets/Media/"
    UploadPaths="~/Assets/Media/"
    DeletePaths="~/Assets/Media/"
   MaxUploadFileSize="31457280"
    />
    <DocumentManager
    ViewPaths="~/Assets/Docs/"
    UploadPaths="~/Assets/Docs/"
    DeletePaths="~/Assets/Docs/"
    MaxUploadFileSize="10485760"
    />
    <TemplateManager
    ViewPaths="~/Assets/Images/,~/Assets/Media/,~/Assets/Docs/"
    UploadPaths="~/Assets/Images/,~/Assets/Media/,~/Assets/Docs/"
    DeletePaths="~/Assets/Images/,~/Assets/Media/,~/Assets/Docs/"
    SearchPatterns="*.html,*.html"
    />

    <Modules>
        <telerik:EditorModule Name="RadEditorStatistics" dockingZone="Bottom" Enabled="true" Visible="true"/>
        <telerik:EditorModule Name="RadEditorDomInspector" dockingZone="Module" Enabled="true" Visible="true"/>
        <telerik:EditorModule Name="RadEditorNodeInspector" dockingZone="Module" Enabled="true" Visible="false"/>
        <telerik:EditorModule Name="RadEditorHtmlInspector" dockingZone="Module" Enabled="false" Visible="false"/>
    </Modules>


    <Tools>
        <telerik:EditorToolGroup Tag="MainToolbar">
            <telerik:EditorTool Name="AjaxSpellCheck"/>
            <telerik:EditorTool Name="FindAndReplace" ShortCut="CTRL+F"/>
            <telerik:EditorTool Name="Copy" ShortCut="CTRL+C"/>
            <telerik:EditorTool Name="Cut" ShortCut="CTRL+X"/>
            <telerik:EditorTool Name="Paste" ShortCut="CTRL+V"/>
            <telerik:EditorTool Name="PasteFromWordNoFontsNoSizes" />
            <telerik:EditorTool Name="PastePlainText" />
            <telerik:EditorSeparator Visible="true"/>
            <telerik:EditorTool Name="Undo" ShortCut="CTRL+Z"/>
            <telerik:EditorTool Name="Redo" ShortCut="CTRL+Y"/>
        </telerik:EditorToolGroup>

        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="ImageManager" ShortCut="CTRL+G"/>
            <telerik:EditorTool Name="ImageMapDialog"/>
            <telerik:EditorTool Name="AbsolutePosition" />
            <telerik:EditorSeparator Visible="true"/>
            <telerik:EditorTool Name="FlashManager" />
            <telerik:EditorTool Name="MediaManager" />
            <telerik:EditorTool Name="FlvVideoManager" Text="FLV Video Manager" />
            <telerik:EditorTool Name="DocumentManager" />
            <telerik:EditorTool Name="TemplateManager" />
            <telerik:EditorTool Name="LinkManager" ShortCut="CTRL+K"/>
            <telerik:EditorTool Name="Unlink" ShortCut="CTRL+SHIFT+K"/>
        </telerik:EditorToolGroup>

        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Bold" ShortCut="CTRL+B"/>
            <telerik:EditorTool Name="Italic" ShortCut="CTRL+I"/>
            <telerik:EditorTool Name="Underline" ShortCut="CTRL+U"/>
            <telerik:EditorTool Name="StrikeThrough" />
            <telerik:EditorSeparator Visible="true"/>
            <telerik:EditorTool Name="JustifyLeft" />
            <telerik:EditorTool Name="JustifyCenter" />
            <telerik:EditorTool Name="JustifyRight" />
            <telerik:EditorTool Name="JustifyFull" />
            <telerik:EditorTool Name="JustifyNone" />
            <telerik:EditorSeparator Visible="true"/>
            <telerik:EditorTool Name="Indent" />
            <telerik:EditorTool Name="Outdent" />
            <telerik:EditorTool Name="InsertOrderedList" />
            <telerik:EditorTool Name="InsertUnorderedList" />
        </telerik:EditorToolGroup>

        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="ConvertToLower" />
            <telerik:EditorTool Name="ConvertToUpper" />
            <telerik:EditorSeparator Visible="true"/>
            <telerik:EditorTool Name="InsertTable" />
            <telerik:EditorTool Name="InsertSnippet" />
            <telerik:EditorTool Name="InsertSymbol" />
        </telerik:EditorToolGroup>

        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="FormatBlock"/>
            <telerik:EditorSeparator Visible="true"/>
            <telerik:EditorTool Name="FormatStripper"/>
            <telerik:EditorTool Name="ApplyClass"/>
        </telerik:EditorToolGroup>

        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Print" ShortCut="CTRL+P"/>
            <telerik:EditorTool Name="Superscript" />
            <telerik:EditorTool Name="Subscript" />
            <telerik:EditorTool Name="InsertParagraph" ShortCut="CTRL+SHIFT+P"/>
            <telerik:EditorTool Name="InsertHorizontalRule" />
            <telerik:EditorTool Name="InsertDate" />
            <telerik:EditorTool Name="InsertTime" />
        </telerik:EditorToolGroup>

        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="XhtmlValidator" />
            <telerik:EditorTool Name="ToggleScreenMode" ShortCut="F11"/>
            <telerik:EditorTool Name="ToggleTableBorder" />
            <telerik:EditorTool Name="Zoom" />
            <telerik:EditorTool Name="ModuleManager" />
            <telerik:EditorSeparator Visible="true"/>
            <telerik:EditorTool Name="AboutDialog" />
            <telerik:EditorTool Name="Help" ShortCut="F1"/>
        </telerik:EditorToolGroup>
    </Tools>

    <ContextMenus>
    <telerik:EditorContextMenu TagName="IMG">
      <telerik:EditorTool Name="SetImageProperties" />
      <telerik:EditorTool Name="ImageMapDialog" />
    </telerik:EditorContextMenu>
    <telerik:EditorContextMenu TagName="TABLE">
      <telerik:EditorTool Name="ToggleTableBorder" />
      <telerik:EditorTool Name="SetTableProperties" />
      <telerik:EditorTool Name="DeleteTable" />
    </telerik:EditorContextMenu>
    <telerik:EditorContextMenu TagName="TD">
      <telerik:EditorTool Name="InsertRowAbove" />
      <telerik:EditorTool Name="InsertRowBelow" />
      <telerik:EditorTool Name="DeleteRow" />
      <telerik:EditorTool Name="InsertColumnLeft" />
      <telerik:EditorTool Name="InsertColumnRight" />
      <telerik:EditorTool Name="MergeColumns" />
      <telerik:EditorTool Name="MergeRows" />
      <telerik:EditorTool Name="SplitCell" />
      <telerik:EditorTool Name="DeleteCell" />
      <telerik:EditorTool Name="SetCellProperties" />
    </telerik:EditorContextMenu>
    <telerik:EditorContextMenu TagName="A">
      <telerik:EditorTool Name="SetLinkProperties" />
      <telerik:EditorTool Name="Unlink" />
    </telerik:EditorContextMenu>
    <telerik:EditorContextMenu TagName="BODY">
      <telerik:EditorTool Name="Cut" />
      <telerik:EditorTool Name="Copy" />
      <telerik:EditorTool Name="Paste" />
      <telerik:EditorTool Name="PasteFromWord" />
      <telerik:EditorTool Name="PastePlainText" />
      <telerik:EditorTool Name="PasteAsHtml" />
    </telerik:EditorContextMenu>
  </ContextMenus>


        <Snippets>
        <telerik:EditorSnippet Name="Hub Page - Heading and Content">
            <h1>Enter heading here</h1>
            <p>Enter text here. <a href="#" title="Read more link"><img alt="Read more link" src="/Assets/Images/Icons/icon_arrow_small.png" longdesc="Read more link" /></a></p>
        </telerik:EditorSnippet>
    </Snippets>

    <Paragraphs>
        <telerik:EditorParagraph Title="&lt;p>Paragraph&lt;/p>" Tag="&lt;p>" />
        <telerik:EditorParagraph Title="&lt;h1>Heading 1&lt;/h1>" Tag="&lt;h1>" />
        <telerik:EditorParagraph Title="&lt;h2>Heading 2&lt;/h2>" Tag="&lt;h2>" />
        <telerik:EditorParagraph Title="&lt;h3>Heading 3&lt;/h3>" Tag="&lt;h3>" />
        <telerik:EditorParagraph Title="&lt;blockquote>BlockQuote&lt;/blockquote>" Tag="&lt;blockquote>" />
    </Paragraphs>

</telerik:radeditor>

[Lini]

Hello Gavin,

Unfortunately, I am still not able to reproduce the problem even with your editor configuration (using version 2008.3.1314 and IE 7). Here is what I tried - I pasted the content you gave in HTML mode, switched to design, clicked the link, then clicked the "A" in the Node inspector to select the whole anchor tag, then opened the Document Manager and selected a document from the list. The link was updated with the new URL and when I switch back to HTML mode I see that only the anchor URL is changed. I also tried the same steps but without clicking the "A" in the node inspector (the whole anchor is selected anyway when you open the document manager dialog).

You can open a support ticket and I will send you my test application to make sure that I am not missing anything. Also, I can suggest one more thing you can try before opening the support ticket - replace the pasteHyperLink method with pasteHtml and see if you get the correct output. Instead of:

editor.pasteHyperLink(argument.realLink, "LinkManager");

try using:

editor.pasteHtml($telerik.getOuterHtml(argument.realLink), "LinkManager");


All the best,
Lini
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.