New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Page-break Button

Here are the details on how to implement a print break button on the editor's toolbar:

  1. Add a custom [PageBreak] button to the toolbar:


    <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1">
                <telerik:EditorTool Name="PageBreak" />
  2. In the aspx/ascx file with the editor add the following JavaScript command under the editor's declaration which will be executed each time when the user presses the [PageBreak] button:


    Telerik.Web.UI.Editor.CommandList["PageBreak"] = function (commandName, editor, args)
        editor.pasteHtml("<p STYLE='page-break-before: always'>sample text in the paragraph</p>"); 
  3. By executing the command above, the user will insert a special print break tag in the editor. The PageBreak command will be rendered as a button on the toolbar. In order to look nice, you should provide a button icon and set the following style in the page:


        .reTool .PageBreak
            background-image: url(<ImagePath>);
In this article