New to Telerik UI for ASP.NET AJAX? Start 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:
-
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>
-
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:
JavaScriptTelerik.Web.UI.Editor.CommandList["PageBreak"] = function (commandName, editor, args) { editor.pasteHtml("<p STYLE='page-break-before: always'>sample text in the paragraph</p>"); };
-
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>