New to Telerik UI for ASP.NET AJAXStart a 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:

    ASP.NET
     <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1">
     	<Tools>
     		<telerik:EditorToolGroup>
     			<telerik:EditorTool Name="PageBreak" />
     		</telerik:EditorToolGroup>
     	</Tools>
     </telerik:RadEditor>
  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:

    JavaScript
     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:

    XML
     <style>
     	.reTool .PageBreak
     	{
     		background-image: url(<ImagePath>);
     	}
     </style>
Not finding the help you need?
Contact Support