Adding jquery Library to the RadEditor Iframe

4 posts, 0 answers
  1. David Moore
    David Moore avatar
    23 posts
    Member since:
    Jul 2008

    Posted 27 Jul 2012 Link to this post

    For a current project we are using jquery written into the content of the radeditor.  The Jquery library exists on the master page of the application, however if my understanding is correct the radeditor is rendered using an iframe and thus the jquery reference is missing.  This is throwing a javascript error for obvious reasons.  Is there any way to include a reference to an external javascript library from within the radeditor iframe?
  2. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 01 Aug 2012 Link to this post

    Hi,

    Indeed, the content area of RadEditor is an editable IFRAME and to prevent potential problems some of the browser vendors such as Mozilla have disabled the script execution inside an editable IFRAME element. This means that even if there is a reference to the external script, it won't be executed in Firefox.

    You can import external code in the editor, but the solution works only in IE:

      <script id="PageJavaScript" language="javascript" type=text/javascript>
          function test1() {
              alert("test");
          }
    </script>  
    <script type="text/javascript">
        function OnClientLoad(editor, args) {
            var encodeScriptsFilter = editor.get_filtersManager().getFilterByName("EncodeScriptsFilter");
            editor.get_filtersManager().remove(encodeScriptsFilter);
     
            var oPageScript = document.getElementById("PageJavaScript");
     
            var oScript = "<script defer='false'>\n" + oPageScript.innerHTML + "\n</" + "script>";
            editor.setFocus();
            editor.set_html(editor.get_html(true) + oScript);
        }
    </script>
    <telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server" ContentFilters="None">
        <Content>
            <img onclick="test1();" src="http://www.telerik.com/r.a.d.controls/Editor/Img/productBox.gif">   
        </Content>
    </telerik:RadEditor>


    Kind regards,
    Rumen
    the Telerik team
    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 their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 02 Jul 2013 Link to this post

    Hi Rumen,

    I am trying to use this technique to show TypeKit fonts in the editor.
    What can I do to prevent the added javascript code from saving in the DB?

    Marc
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 03 Jul 2013 Link to this post

    Hi Marc,

    You can simply enable the RemoveScripts filter: http://demos.telerik.com/aspnet-ajax/editor/examples/builtincontentfilters/defaultcs.aspx.

    You can use the Content server property of the RadEditor to obtain the HTML from the control. Then you can remove the strings deemed dangerous by your scenario (e.g. script tags). This has to happen before this content is put in the database, of course, but since the control does not integrate directly with a database the custom code that does this should be easy to find.

    The other option is using the OnClientSubmit event of the control to clean it in the same manner with JavaScript (see the get_html(true) and set_html() methods from its API), but this may interfere with the user's interaction with the control. Here is a small example of a couple of regular expressions:
    textHtml = textHtml.replace(new RegExp("<(SCRIPT)([^>]*)/>", "ig"), "");
    textHtml = textHtml.replace(new RegExp("<(SCRIPT)([^>]*)>[\\s\\S]*?</(SCRIPT)([^>]*)>", "ig"), "");
     where textHtml is the content from the editor and this forum thread can show you how to run a given filter when needed.

    Securing the application and making sure no malicious content is stored is the responsibility of the developer, not of the control.


    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.
Back to Top