Adding jquery Library to the RadEditor Iframe

[David Moore]

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?

[Rumen]

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

[Fit2Page]

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

[Marin Bratanov]

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