4 Answers, 1 is accepted
RadEditor does not offer a Page Break tool out-of-the box, but you can see how to implement your own in this help article: Implementing a Page-break Button.
Best regards,
Rumen
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
I’ve just started with Telerik and I’ve been asked to implement a Page break button. It works fine as per the example (http://www.telerik.com/help/aspnet-ajax/implementingpagebreakbutton.html) but the problem I have is, say we have the following html:
<h1>some heading</h1>
<ul>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>
If the user puts their cursor at the start or end of the heading, the page break is inserted between the <h1> tags. Similarly, if they place it at the end of the list, it is inserted inside the <li>.
Is there a way to jump to the start or end of the section? In this case, for h1 I would want to jump to the start of the <h1> tag, so I get
PAGE BREAK <h1>some heading</h1>
Or, if they do it in the list, I would want to jump to the end of the list so I get
</ul> PAGE BREAK.
Thanks for any help you can give me.
RadEditor does not offer such functionality out-of-the-box. In order to achieve it you need to examine the content using JavaScript and insert the pagebreak paragraph to the required position. The following code demonstrates a different approach to insert the pagebreak before the current element if it is <li> or <h>:
<script type=
"text/javascript"
>
Telerik.Web.UI.Editor.CommandList[
"PageBreak"
] =
function
(commandName, editor, args)
{
var
currentElement = editor.getSelectedElement();
if
(currentElement.tagName ==
"LI"
|| currentElement.tagName =
"H1"
|| currentElement.tagName =
"H2"
|| currentElement.tagName =
"H3"
|| currentElement.tagName =
"H4"
|| currentElement.tagName =
"H5"
)
{
var
pageBreak = document.createElement(
"span"
);
pageBreak.setAttribute(
"style"
,
"page-break-before: always"
);
pageBreak.innerHTML =
"sample text in the paragraph"
;
currentElement.parentNode.insertBefore(pageBreak, currentElement);
}
else
{
editor.pasteHtml(
"<span STYLE='page-break-before: always'>sample text in the paragraph</span>"
);
}
};
</script>
Please note that this is just an example and you will need to extend it in order to match the specific scenario's requirements.
Greetings,
Dobromir
the Telerik team
Minor tweak would be to move after instead of before for LI, and also take parentNode.parentNode so you get out of the UL / OL, not just the list item.