Problem adding hyperlink to editor content with Javascript in tag

[Peter Livsey]

Hi

We have a custom dialog that allows the user to add a link that generates a link that calls some Javascript.  The link is added using code:

var newTextValue = "<a href=\"JavaScript:zoomToGIS('post','POSTCODE','"+reply+"')\" title=\""+rngSelection.htmlText+"\">"+rngSelection.htmlText+"</a>";                   

to give the link:
<a href="JavaScript:zoomToGIS('post','POSTCODE','DL1 5UE')" title="map">map</a>

However, when the page is checked in the link loses the javascript and is stored as:

<a title="map">map</a> 

Is there a way to make the link stay as we want?

Thanks
Peter
                                                    

[George]

Hi Peter,

Please open the respective ConfigFile and set the editor's AllowScripts property value to true e.g.
<property name="AllowScripts">true</property>

Clear the browser's cache and test the behavior. Is the problem still observed?

Sincerely,
George
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Peter Livsey]

Hi, thanks for the reply.  I tried making the change to the editor's config file but the behaviour is still the same.

I have been trying this on a test environment using version 5.1.0.0 of the editor (we currently using 4.5.2.0 on our live sites).  I've upgraded my test PC to use version 5.2.0.0 of the editor, but unfortunately the href part of the tag is still removed on storing the content.

Peter

[George]

Hi Peter,

Please review the following KB article that shows how to achieve the desired behavior:
http://www.telerik.com/help/moss/editor/scripts%20in%20radeditor.html

Also, note that in order to achieve the desired behavior your have to put your JavaScript within script tags, or it will be stripped automatically by MOSS e.g.

<a title="map" id="customLink">map</a>
<script>
   document.getElementById("customLink").onclick = function() 
   { 
      //Put your custom logic here 
   }
</script>

I hope this helps.

Best regards,
George
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Peter Livsey]

Unfortunately this still does work.  As soon as the dialog box is close the text returned to the editor does not contain the script tag. It only returns:

<a title="map" id="customLink">map</a>

This is before the content is even saved.

Peter

[George]

Hi Peter,

It seems that one of the editor's filters is encoding the script tag e.g. <encoded_script></encoded_script> and due to this the script cannot be executed. So, in order to achieve the desired behavior the EncodeScriptsFilter have to be disabled. Open the MOSSEditorTools.js and set the following code at the bottom:

Telerik.Web.UI.Editor.EncodeScriptsFilter.prototype.getHtmlContent = function(content)
{
        return content;
};

Telerik.Web.UI.Editor.EncodeScriptsFilter.prototype.getDesignContent = function(content)
{
        return content;
};

By doing this, you will override the desired filter and disable it. Note that, the content have to be published, reopened and then the desired behavior will be achieved.

I hope this helps.

Kind regards,
George
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Peter Livsey]

I've added the code to the bottom of the MOSSEditorTools.js file.

When I add this - <a href="JavaScript:zoomToGIS('layer','POSTCODE','DH1 5UE')" title="Test Link">test</a> - to the editor it appears fine.

But again when the page is checked-in or published the href is removed.

Even adding:
<a title="map" id="custom">map</a> <script> document.getElementById("custom").onclick = function() {zoomToGIS('layer','POSTCODE','DH1 5UE');}</script>
in html view, switching to standard view and then back to html view causes the link to change to 
<a title="map" id="custom">map</a>

I still have <property name="AllowScripts">True</property> set in the configfile used by the editor and also in the page layout where the RadHtmlField is referenced I have added the property allowSpecialTags="True" and have been clearing the cache each time I have been testing the changes.

[George]

Hi Peter,

Could you please clarify what is your exact scenario?

If you use RadEditor in WCM:

You will have to replace the original editor through SharePoint Designer. Set  the AllowScripts property to true in ConfigFile.xml and AllowSpecialTags in the current page using SharePoint Designer. Click here for more information.

In SharePoint forms scenario (Lists, Wikis, Blogs, etc.)

You cannot use Javascript, because RadEditor does not have control over the presentation view which means that we cannot control the output when it is not in edit mode.

I hope this helps.

Sincerely,
George
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Peter Livsey]

This is our situation and what we are trying to achieve.

We have the following javascript in the master page of our site.  This script is used to call our GIS system and show a map at a given point. 

<script language="javascript" type="text/javascript">
function zoomToGIS(theType,param1,param2)
{
 var siteURL="http://gis.durham.gov.uk/website/intermap";
                               
        if (theType=="layer")
        {
          //Set the URL to zoom to a postcode.
                 var theURL = siteURL + "?QUERYLAYER=" + param1 + "&GISQUERY=" + param2
        }
                               
        if (theType=="grid")
        {
                 var theURL = siteURL + "?X=" + param1 + "&Y=" + param2;
        }
 
        //get screen resolution
        var screenWidth = screen.width
        var screenHeight = screen.height
 
        //check resolution of user machine is OK for GIS
        if (screenWidth < 640 || screenHeight < 480)
        {
         alert("To use the Interactive Mapping Service, your screen resolution should be set to 640 x 480 or greater")
        }
        else
        {
                //set sizes for the GIS window, depending upon users screen resolution
                var windowWidth=screenWidth * 0.98
                var windowHeight=screenHeight * 0.90
                                               
                //open the GIS in a window
                myWin=open(theURL, "displaywindow", "width=" + windowWidth + ",height="+windowHeight+",top=0,left=0,resizable=no,status=no,toolbar=no,menubar=no")
        }             
}
</script>

In the page layout for the site we have replace the MS richhtml field with the RadEditor

<%@ Page language="C#"   Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,Microsoft.SharePoint.Publishing,Version=12.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document" %>
<%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="radE" Namespace="Telerik.SharePoint.FieldEditor" Assembly="RadEditorSharePoint, Version=5.2.0.0, Culture=neutral, PublicKeyToken=1f131a624888eeed" %>
<asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server">
<SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">

<radE:RadHtmlField id="ContentRight" FieldName="My_x0020_Page_x0020_Content" runat="server" ToolsFile="~/_controltemplates/Test_ToolsFile.xml" ConfigFile="~/_controltemplates/Test_ConfigFile.xml" allowSpecialTags="True">
</radE:RadHtmlField>
</asp:Content>

In the Test_ConfigFile I have
<?xml version="1.0" encoding="utf-8" ?>
<!-- ==============================================================================================
 Config File valid structure:
 <configuration>
    <property>...</property>
    ...
  <property>
   <item>...</item>
   <item>...</item>
   ...
  </property>
  ...
 </configuration>
=============================================================================================== -->
<configuration>
  <property name="AllowThumbGeneration">True</property>
  <property name="ConvertToXhtml">True</property>
  <property name="EnableDocking">False</property>
  <property name="ShowHtmlMode">True</property>
  <property name="ShowPreviewMode">False</property>
  <property name="StripAbsoluteAnchorPaths">False</property>
  <property name="StripAbsoluteImagesPaths">False</property>
  <property name="ToolbarMode">ShowOnFocus</property>
  <property name="ToolsWidth">600px</property>
  <property name="Skin">Telerik</property>
  <property name="NewLineBr">False</property>
  <property name="EnableServerSideRendering">False</property>
  <property name="StripFormattingOnPaste">Span, Font, MSWord</property>
  <property name="OnClientCommandExecuted">OnClientCommandExecuted</property>
  <property name="CssFiles"><item>/_wpresources/RadEditorSharePoint/dliEditor.css</item></property>
  <property name="SpellDictionaryLanguage">en-GB</property>
  <property name="AllowScripts">True</property>
</configuration>

On the page layout I can hardcode a call to the Javascript using
<a href="JavaScript:zoomToGIS('layer','POSTCODE','DH1 5UE')" title="Test Link">Test Link</a>

When the link is clicked a new window opens up and connects to our GIS at the given postcode (DH1 5UE).

However, what we really need to do is be able to enter links such as this in the content area of the page, rather than having them hardcoded.

To do this I have been trying to enter the same link in the html view of the RadEditor.  If I switch to design or preview view the link looks like it should when you hover over it.  If I then click to publish the page, or check in to shared draft, the link code is only showing as:

<a title="Test Link">Test Link</a>

When I go back into edit mode for the page the html view also shows the same html as above.

We really need to know how to make the link remain as entered.

[George]

Hi Peter,

Please review carefully my previous replies - you cannot set JavaScript in the link's href attribute, because it will be automatically stripped by MOSS e.g.

<a href="JavaScript:zoomToGIS('layer','POSTCODE','DH1 5UE')" title="Test Link">Test Link</a>.

In order to prevent this, you need to isolate the JavaScript code within script tags e.g. 

<a id="TestLink" href="#" title="Test Link">Test Link</a>
<script>
   document.getElementById("TestLink").onclick = function()
   {
      //Put your custom logic here e.g. zoomToGIS('layer','POSTCODE','DH1 5UE')
   }
</script>

I hope this helps.

Kind regards,
George
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Peter Livsey]

I'm sure I've already tried this but I have tried again entering this

<a id="TestLink" href="#" title="Test Link">Test Link</a>
<script>document.getElementById("TestLink").onclick = function(){zoomToGIS('layer','POSTCODE','DH1 5UE')}</script>

into the html view of the editor.
If I publish the page immediately, or even switch to design view and back to html view the code is altered immediately so that it is

a id="TestLink" href="#" title="Test Link">Test Link</a>

No matter whether I but the <script> text all on the same line or separately the entire tag is removed.

I still have the EncodeScriptsFilter set in the MOSSEditorTools.js file and allowScripts=True in the config file.

Peter

[George]

Hi Peter,

Here is what you have to do in order to achieve the desired behavior:

1. Disable the editor's  EncodeScriptsFilter
   Open the MOSSEditorTools.js and set the following code at the bottom:
   

   Telerik.Web.UI.Editor.EncodeScriptsFilter.prototype.getHtmlContent = function(content)
   {
           return content;
   };
   
   Telerik.Web.UI.Editor.EncodeScriptsFilter.prototype.getDesignContent = function(content)
   {
           return content;
   };

    
2. Review the following help article and depending on your exact scenario enable Scripts in RadEditor:
   http://www.telerik.com/help/aspnet-ajax/scripts-in-radeditor.html
    
3. Change the content to be pasted within RadEditor so that the script to be within Script tags e.g.
   

   <a id="TestLink" href="#" title="Test Link">Test Link</a>
   <script>
      document.getElementById("TestLink").onclick = function()
      {
         //Put your custom logic here e.g. zoomToGIS('layer','POSTCODE','DH1 5UE')
      }
   </script>
   

    
4. Submit the content and test the behavior.

For convenience, I attached a sample video that shows how to achieve the desired behavior. I hope this helps.

Sincerely, George
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Peter Livsey]

Thanks for looking at this George.  I have been able to work out what is causing the problem for us.

I've followed your example and it does work for us.  It seems our problem is being caused because in the page layout we are specifying a config file property to point to a custom config for the editor instance.

In this configfile we are setting things like the spellchecker dictionary, file upload size limits and allow extensions.

If I remove the link our config file in the page layout everything works as it does in your video.

I've tried copying the basic configfile.xml file into a different folder and referencing it in the page layout, but this breaks the functionality.

I've editted the configfile.xml in the wpresources\RadEditorSharePoint\5.2.0.0__1f131a624888eeed\Resources directory to include the extra properties that we need and removed the link to the custom config file in the page layout and ecerything works.

It seems that the problem all the time was that specifying a different config file breaks the functionality.

Thanks for the help
Peter

[edgar.cardeira]

That's all great! As anyone solved this problem?

I have to use a diferent config file. Not using. Is not a solution to me.
How can i have javascript using diferent config files?

[Peter Livsey]

Hi Edgar

Have you had an progress with this? So far we've only encountered the problem with one site so we haven't done anymore work looking into a better solution.

Peter

[Stanimir]

Hi Peter,

In Telerik online help you can find article called Different configuration files for different webs:
http://www.telerik.com/help/aspnet-ajax/different-configuration-files-for-different-webs.htm

You can get additional info about using unique configuration files there.

Kind regards,
Stanimir Patarinski
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.