include javascript inside the editor content in UI for ASP.NET AJAX Editor

anju

11 posts

Member since:
Dec 2008

Posted 01 Jan 2009 Link to this post

hi,

Can i insert javascript code inside the telerik editor content.
ie. suppose i insert the code
,<script type='text/javascript' language='javascript'> alert("hello");</script>
inside the editor content.
when i take its html, it should not be
&LT;SCRIPT TYPE='TEXT/JAVASCRIPT' LANGUAGE='JAVASCRIPT'&GT; ALERT("HELLO");&LT;/SCRIPT&GT;

i need to use this script content to alert hello.
i hope u got my purpose.

Svetlina Anati

Admin

2795 posts

Posted 02 Jan 2009 Link to this post

Hi Anju,

The observed behavior is due to the EncodeScriptsFilter content filter of RadEditor, which encodes all script tags from the content. Its purpose is to prevent the browser to modify and execute the script tags in Design mode.

You can easily override the EncodeScriptsFilter filter with the following code:

    
            <telerik:RadEditor ID="RadEditor1" runat="server" ></telerik:RadEditor> 
        
            <script type="text/javascript">  
        
            Telerik.Web.UI.Editor.EncodeScriptsFilter.prototype.getHtmlContent = function(content)  
        
            {  
        
                    return content;  
        
            };  
        
            Telerik.Web.UI.Editor.EncodeScriptsFilter.prototype.getDesignContent = function(content)  
        
            {  
        
                    return content;  
        
            };  
        
            </script> 
        
            <button onclick="alert($find('RadEditor1').get_html(true));return false">Show Content</button>

You can also disable the EncodeScriptsFilter filter on the server using the DisableFilter method:

    
            RadEditor1.DisableFilter(EditorFilters.EncodeScriptsFilter);

Sincerely yours,
Svetlina
the Telerik team

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

Emily

9 posts

Member since:
Sep 2008

Posted 17 Mar 2009 Link to this post

Hi - we are using skins to set properties on the editor for different sites that use our core code that includes the editor. Is it possible to enable/disable Javascript in the editor via a property in the skin file?

Thanks

Emily

Rumen

Admin

14459 posts

Posted 17 Mar 2009 Link to this post

Hello Emily,

The property that you are looking for is named ContentFilters. You can set it in your skin file inside the editor's declaration. It will allow you to enable only the desired RadEditor's content filters. In your scenario, you should not add as a value of this property only the RemoveScripts filter. You can find more information here.

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

Emily

9 posts

Member since:
Sep 2008

Posted 17 Mar 2009 Link to this post

Great - can you tell me which content filters are enabled by default, so I can add those into my declaration, while leaving out the RemoveScripts filter?

Thanks
Emily

Emily

9 posts

Member since:
Sep 2008

Posted 17 Mar 2009 Link to this post

I guess I need some more help... this is our current skin file. Could you show me how to add the ContentFilters property as I have described? Is it an elemement or an attribute?

    
            <telerik:radeditor runat="server"   
        
                    Theme="Web20"   
        
                    Height="500px"  Width="98%" 
        
                    ToolsFile="~/resources/telerik/editor/ToolsFile.xml"   
        
                    ExternalDialogsPath="~/resources/telerik/editor/dialogs" EnableResize="false"   
        
                    NewLineBr="False">      
        
                    <CssFiles> 
        
                        <telerik:EditorCssFile Value="~/layout/styles/editor.css" /> 
        
                        <telerik:EditorCssFile Value="~/layout/styles/pagestyles.css" /> 
        
                    </CssFiles> 
        
                    <ImageManager EnableImageEditor="true" ViewPaths="~/uploads/images" UploadPaths="~/uploads/images" DeletePaths="~/uploads/images" MaxUploadFileSize="5242880" /> 
        
                    <FlashManager ViewPaths="~/uploads/flash" UploadPaths="~/uploads/flash" DeletePaths="~/uploads/flash" MaxUploadFileSize="8388608" /> 
        
                    <DocumentManager ViewPaths="~/uploads/docs" UploadPaths="~/uploads/docs" DeletePaths="~/uploads/docs" MaxUploadFileSize="8388608" /> 
        
                    <MediaManager ViewPaths="~/uploads/media" UploadPaths="~/uploads/media" DeletePaths="~/uploads/media" MaxUploadFileSize="10485760" /> 
        
                    <Content> 
        
                    </Content> 
        
            </telerik:radeditor>

Emily

9 posts

Member since:
Sep 2008

Posted 17 Mar 2009 Link to this post

Sorry for all of the replies... I think I answered those two questions for myself but now am getting an error when this is my skin file

    
            <%@ Register TagPrefix="telerik"  Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
        
            <telerik:radeditor runat="server"   
        
                    Theme="Web20"   
        
                    Height="500px"  Width="98%" 
        
                    ToolsFile="~/resources/telerik/editor/ToolsFile.xml"   
        
                    ExternalDialogsPath="~/resources/telerik/editor/dialogs" EnableResize="false"   
        
                    NewLineBr="False" ContentFilters="FixUIBoldItalic,FixEnclosingP,IECleanAnchors,MozEmStrong,ConvertFontToSpan,ConvertToXhtml,IndentHTMLContent">      
        
                    <CssFiles> 
        
                        <telerik:EditorCssFile Value="~/layout/styles/editor.css" /> 
        
                        <telerik:EditorCssFile Value="~/layout/styles/pagestyles.css" /> 
        
                    </CssFiles> 
        
                    <ImageManager EnableImageEditor="true" ViewPaths="~/uploads/images" UploadPaths="~/uploads/images" DeletePaths="~/uploads/images" MaxUploadFileSize="5242880" /> 
        
                    <FlashManager ViewPaths="~/uploads/flash" UploadPaths="~/uploads/flash" DeletePaths="~/uploads/flash" MaxUploadFileSize="8388608" /> 
        
                    <DocumentManager ViewPaths="~/uploads/docs" UploadPaths="~/uploads/docs" DeletePaths="~/uploads/docs" MaxUploadFileSize="8388608" /> 
        
                    <MediaManager ViewPaths="~/uploads/media" UploadPaths="~/uploads/media" DeletePaths="~/uploads/media" MaxUploadFileSize="10485760" /> 
        
                    <Content> 
        
                    </Content> 
        
            </telerik:radeditor>

The error is

Parser Error

Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.

Parser Error Message: Cannot create an object of type 'Telerik.Web.UI.EditorFilters' from its string representation 'FixUIBoldItalic,FixEnclosingP,IECleanAnchors,MozEmStrong,ConvertFontToSpan,ConvertToXhtml,IndentHTMLContent' for the 'ContentFilters' property.

Rumen

Admin

14459 posts

Posted 20 Mar 2009 Link to this post

Hello Emily,

Please exclude the fixUlBoldItalic filter and try only with these ones

ContentFilters="FixEnclosingP,IECleanAnchors,MozEmStrong,ConvertFontToSpan,ConvertToXhtml,IndentHTMLContent"

This works fine on my side.

Greetings,
Rumen
the Telerik team

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

skinfileproject.zip

Krutzy

2 posts

Member since:
Jan 2013

Posted 05 Jun 2013 Link to this post

Hi,

I have tried above code as follows in my aspx page.

<telerik:RadEditor ClientIDMode="Static" ID="RadEditor2" runat="server" EnableEmbeddedScripts="True"></telerik:RadEditor>

<script type="text/javascript">

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

return content;

};

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

return content;

};

function getdata() {

alert($('#RadEditor2').get_html(true)); return false;

}

</script>

<button onclick="getdata();return false;">Show Content</button>

But on click of show content page, its getting refresh because its giving error like 'get_html undefined'
also on server side code I have written as

RadEditor2.DisableFilter(EditorFilters.EncodeScriptsFilter);

but it is also giving compilation error for "EncodeScriptsFilter" not found.

Please help me on this.

Marin Bratanov

Admin

5897 posts

Posted 10 Jun 2013 Link to this post

Hello,

It seems you are referring to either the "RemoveScripts" or "EncodeScripts" filter of the RadEditor: http://demos.telerik.com/aspnet-ajax/editor/examples/builtincontentfilters/defaultcs.aspx. The intellisense in VS also offers the list with the avaialble filters in the EditorFIlters collection. There simply is no EncodeScriptsFilter filter, hence the error.

On the JavaScript error - this is not how a reference to the RadEditor is obtained, you need the $find() method:
alert($find("<%=RadEditor2.ClientID%>").get_html(true));

Also, I strongly advise that you remove the ClientIDMode=Static setting, because it is not supported by the RadControls for ASP.NET AJAX.

Regards,
Marin Bratanov
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.