RadEditor for ASP.NET
Contents
Printing Content with Styles Send comments on this topic.
Handling Content > Printing Content with Styles

Glossary Item Box

 

You may want to print the content of the editor along with the styles although browsers do not generally print with styles.
Internet Explorer for example, automatically strips CSS styles when the page is being printed.

Fortunately, there is a workaround for this:

  1. Define your own external CSS File including the styles you want to use for printing
  2. Add the following custom Print command under the editor declaration, i.e. 

     
    ASPX Copy Code
      <rad:radEditor id= "RadEditor1" runat= "server"></rad:radEditor>

          <script type="text/javascript">
          RadEditorCommandList[ "CustomPrint"] = function anon(commandName, editor, oTool)
      {
            var printIframe = document.createElement("IFRAME");
            document.body.appendChild(printIframe);
            var printDocument = printIframe.contentWindow.document;
            printDocument.designMode = "on";
            printDocument. open();
            var currentLocation = document.location.href;
            currentLocation = currentLocation.substring(0, currentLocation.lastIndexOf("/") + 1);
            printDocument.write( "    <html><head></head><body>" + editor.GetHtml() + "</body></html>");
            printDocument.close();

            try
            {
              if (document.all)
              {
                 var oLink = printDocument.createElement("link");
                 oLink.setAttribute( "href", currentLocation + "PrintWithStyles.css", 0);
                 oLink.setAttribute( "type", "text/css");
                 oLink.setAttribute( "rel", "stylesheet", 0);
                 printDocument.getElementsByTagName( "head")[0].appendChild(oLink);
                 printDocument.execCommand( "Print");
              }
              else
              {
                 printDocument.body.innerHTML = "    <link rel='stylesheet' type='text/css' href='" + currentLocation + "PrintWithStyles.css'></link>" + printDocument.body.innerHTML;
                 printIframe.contentWindow. print();
              }
            }
            catch(ex)
            {

            }
            document.body.removeChild(printIframe);
      };
          </script>

     

  3. To create a custom [Print] button, add the following line in the editor ToolsFile, i.e.

    ToolsFile.xml Copy Code
         <root>
                 <tools name="MainToolbar" dockable="false">
                     <tool name="CustomPrint" iconurl="~/PATH_TO_YOUR_CUSTOM_PRINT_ICON" />
                     ...
                 <tools>
             </root>

     

   

The provided solution works properly under Firefox and Internet Explorer.

 

ADDITIONAL INFORMATION

You can find a good resource on how to print CSS styles on the Internet. You can see the following articles which we have chosen for you:

EXAMPLE FILES

    PrintWithStyles