Menu
I want to append current content-editor to next page when current page get completed
Here is my fiddle Check
Any help will be appreciable
Actually what I am doing is I have created a text editor in which I have added header footer and a content-editor but now I want to add a new page with same header and footer but want to append my current page content-editor
var margin;
var pageSize;
var headerHeight;
var footerHeight;
var marginTopBottom;
var marginLeftRight;
var marginArray;
var reportHeight;
var reportWidth;
$(function () {
GetPage();
jQuery("#btnGetSize").on('click', function () {
var h = $('#Template').height();
var w = $('#Template').width();
var h1 = $('#ReportPage').height();
var w1 = $('#ReportPage').width();
alert("Template : h=" + (parseFloat(h) / 3.76) + " w=" + (parseFloat(w) / 3.76) + " ReportPage : h1=" + (parseFloat(h1) / 3.76) + " w1=" + (parseFloat(w1) / 3.76) + "");
});
jQuery("#ddlSize").change(function () {
GetPage();
});
jQuery("#ddlMargin").change(function () {
GetPage();
});
$("#btnPrint1").on('click', function () {
var divContents = $("#ReportPage").html();
var printWindow = window.open('', '', 'height=1000px,width=1000px');
printWindow.document.write('<html><head>');
printWindow.document.write('</head><body >');
printWindow.document.write(divContents);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
});
// -------------------------
$("#btnPrint").on('click', function () {
$('#main').addClass("page").css("display", "none");
$('#main').addClass("print page ")
var content_height = $('#TemplateSubPage').height();
var page = 1;
function buildReport() {
if ($('#TemplateSubPage').contents().length > 0) {
$page = $("#TemplatePage").clone();
$page.find(".subpage").empty();
$page.find(".footer span").append(page);
$("#ReportPage").append($page);
$('.subpage').attr('disabled', 'disabled');
$("#TemplateSubPage").prop('disabled', true);
page++;
$('#TemplateSubPage').columnize({
columns: 1,
target: ".page:last .subpage",
overflow: {
height: content_height,
id: "#TemplateSubPage",
doneFunc: function () {
console.log("done with page");
buildReport();
}
}
});
}
}
setTimeout(buildReport, 1000);
});
});
//=------------------------
function GetPage() {
pageSize = $('#ddlSize option:selected').text();
margin = $('#ddlMargin option:selected').text();
headerHeight = $('.header').height();
footerHeight = $('.footer').height();
marginArray = new Array();
marginArray = GetMargins();
marginTopBottom = parseFloat(marginArray[0]) + parseFloat(marginArray[2]) + (parseFloat(headerHeight) / 3.7) + (parseFloat(footerHeight) / 3.7);
marginLeftRight = parseFloat(marginArray[1]) + parseFloat(marginArray[3]);
if (pageSize == "--Select--") {
//$("#TemplatePage .divOuter").css("width", "210mm").css("height", "290mm");
$(".page").css("width", "210mm").css("min-height", "290mm");
$(".subpage").css("height", 277 + "mm").css("max-height", 290 + "mm").css("width", 187 + "mm");
// $("div .subpage").css("height", (290) + "mm").css("max-height", (290) + "mm").css("width", (210) + "mm");
}
else if (pageSize == "A0") {
$(" .page").css("width", "841mm").css("min-height", "1175mm"); /*page margins top right bottom left */
$(".subpage").css("height", 1155 + "mm").css("max-height", 1175 + "mm").css("width", 820 + "mm");
// $("div .subpage").css("height", (1175) + "mm").css("max-height", (1175) + "mm").css("width", (841) + "mm");
}
else if (pageSize == "A1") {
$(".page").css("width", "594mm").css("min-height", "830mm");
$(".subpage").css("height", 810 + "mm").css("max-height", 830 + "mm").css("width", 574 + "mm");
//$("div .subpage").css("height", (830) + "mm").css("max-height", (830) + "mm").css("width", (594) + "mm");
}
else if (pageSize == "A2") {
$(".page").css("width", "420mm").css("min-height", "585mm");
$(".subpage").css("height", 565 + "mm").css("max-height", 585 + "mm").css("width", 400 + "mm");
// $("div .subpage").css("height", (585) + "mm").css("max-height", (585 ) + "mm").css("width", (420 - marginLeftRight) + "mm");
}
else if (pageSize == "A3") {
$("div .page").css("width", "297mm").css("min-height", "413mm");
// $("div .subpage").css("height", (413 - marginTopBottom) + "mm").css("max-height", (413 - marginTopBottom) + "mm").css("width", (297 - marginLeftRight) + "mm");
}
else if (pageSize == "A4") {
// $("#TemplatePage .divOuter").css("width", "210mm").css("height", "290mm");
$(".page").css("width", "210mm").css("min-height", "297mm");
$(".subpage").css("height", 277 + "mm").css("max-height", 297 + "mm").css("width", 187 + "mm");
// $("div .subpage").css("height", (290 - marginTopBottom) + "mm").css("max-height", (290 - marginTopBottom) + "mm").css("width", (210 - marginLeftRight) + "mm");
}
else if (pageSize == "A4 LandScape") {
// $("#TemplatePage .divOuter").css("width", "297mm").css("height", "200mm");
$(".page").css("width", "297mm").css("min-height", "200mm");
$(".subpage").css("height", 180 + "mm").css("max-height", 200 + "mm").css("width", 277 + "mm");
// $("div .subpage").css("height", (200 - marginTopBottom) + "mm").css("max-height", (200 - marginTopBottom) + "mm").css("width", (299 - marginLeftRight) + "mm");
}
else if (pageSize == "A5") {
$(".page").css("width", "148mm").css("min-height", "200mm");
$(".subpage").css("height", 180 + "mm").css("max-height", 200 + "mm").css("width", 126 + "mm");
}
else if (pageSize == "A6") {
$(".page").css("width", "105mm").css("min-height", "142mm");
$(".subpage").css("height", 122 + "mm").css("max-height", 142 + "mm").css("width", 83 + "mm");
//$("div .subpage").css("height", (142 - marginTopBottom) + "mm").css("max-height", (142 - marginTopBottom) + "mm").css("width", (105 - marginLeftRight) + "mm");
}
else if (pageSize == "A7") {
$(".page").css("width", "74mm").css("min-height", "101mm");
$(".subpage").css("height", 81 + "mm").css("max-height", 101 + "mm").css("width", 51.30 + "mm");
// $("div .subpage").css("height", (101 - marginTopBottom) + "mm").css("max-height", (101 - marginTopBottom) + "mm").css("width", (74 - marginLeftRight) + "mm");
}
else if (pageSize == "A8") {
$(".page").css("width", "52mm").css("min-height", "71mm");
$(".subpage").css("height", 51 + "mm").css("max-height", 71 + "mm").css("width", 29.60 + "mm");
// $("div .subpage").css("height", (71 - marginTopBottom) + "mm").css("max-height", (71 - marginTopBottom) + "mm").css("width", (52 - marginLeftRight) + "mm");
}
}
function GetMargins() {
var marginArray = new Array();
margin = $('#ddlMargin').val();
if (margin == 0) {
$(".page").css("padding", "25.4mm 25.4mm 25.4mm 25.4mm");
marginArray = ["25.4", "25.4", "25.4", "25.4"];
return marginArray;
}
else if (margin == 1) {
$(".page").css("padding", "12.7mm 12.7mm 12.7mm 12.7mm"); /*page margins top right bottom left */
marginArray = ["12.7", "12.7", "12.7", "12.7"];
return marginArray;
}
else if (margin == 2) {
$(".page").css("padding", "25.4mm 25.4mm 25.4mm 25.4mm");
marginArray = ["25.4", "25.4", "25.4", "25.4"];
return marginArray;
}
else if (margin == 3) {
$(".page").css("padding", "25.4mm 19.05mm 25.4mm 19.05mm");
marginArray = ["25.4", "19.05", "25.4", "19.05"];
return marginArray;
}
else if (margin == 4) {
$(".page").css("padding", "25.4mm 12.7mm 25.4mm 12.7mm");
marginArray = ["25.4", "12.7", "25.4", "12.7"];
return marginArray;
}
else if (margin == 5) {
$(".page").css("padding", "0mm 0mm 0mm 0mm");
marginArray = ["0", "0", "0", "0"];
return marginArray;
}
} body
{
margin: 0;
padding: 0;
font: 12pt "Tahoma";
}
.page
{
padding: 20mm;
border: 1px solid black;
border-radius: 5px;
background: white;
margin-top: 0px;
margin-bottom: 0px;
}
.subpage
{
min-width: 10mm;
word-break: break-all;
cursor: text;
overflow: hidden;
top: 0px;
padding: 1cm;
border: 1px solid red;
}
@page
{
margin: 0;
}
@media print
{
/* html, body
{
width: 210mm;
height: 297mm;
}
.page
{
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
*/
}<script src="https://dl.dropboxusercontent.com/u/285608/Miscellaneous/JS%20Libraries/columnizer/jquery.columnizer.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="controls">
<div style="text-align: center; float: left; font-size: medium">
<select id="ddlSize">
<option id="A" value="0">--Select--</option>
<option id="A0" value="841mm X 1189mm">A0</option>
<option id="A1" value="594mm X 841mm">A1</option>
<option id="A2" value="420mm X 594mm">A2</option>
<option id="A3" value="297mm X 420mm">A3</option>
<option id="A4" value="210mm X 297mm">A4</option>
<option id="A4Landscape" value="297mm X 210mm">A4 LandScape</option>
<option id="A5" value="148mm X 210mm">A5</option>
<option id="A6" value="105mm X 148mm">A6</option>
<option id="A7" value="74mm X 105mm">A7</option>
<option id="A8" value="52mm X 74mm">A8</option>
</select>
</div>
<button id="btnPrint">
Print preview</button>
<button id="btnPrint1">
Print</button>
<button id="btnGetSize">
Get divSize</button>
<div style="text-align: center; float: left; padding-bottom: 50px; font-size: medium;
width: 300px">
<select id="ddlMargin">
<option id="No" value="0">--Select--</option>
<option id="Narrow" value="1">0.5" 0.5" 0.5" 0.5" </option>
<option id="Normal" value="2">1" 1" 1" 1"</option>
<option id="Moderate" value="3">1" 0.75" 1" 0.75" </option>
<option id="Other" value="4">1" 0.5" 1" 0.5" </option>
<option id="NoMargin" value="5">0" 0" 0" 0"</option>
</select>
</div>
</div>
<!--tyle="border: 1px solid black;"-->
<div id="main">
<div class="page" id="TemplatePage" style="page-break-after: always;">
<div id="header">
<center>
This is header</center>
<br />
</div>
<div class="subpage" contenteditable="true" id="TemplateSubPage">
<br />
</div>
<div id="footer">
<br />
<center>
This is Footer</center>
</div>
</div>
</div>
<div id="ReportPage" class="divOuter">
</div>
283
The page-break-after CSS property adjusts page breaks after the current element. This property applies to block elements that generate a box. It won't apply on an empty <div> that won't generate a box.
page-break-before: auto instead of . page-break-before: always. The "auto" will break the page only if the contents are at the end if the page, this will prevent breaking the page and leaving a lot of blank space. Save this answer.
We can add a page break tag with style "page-break-after: always" at the point where we want to introduce the pagebreak in the html page.
The page-break-before property adds a page-break before a specified element.. Tip: The properties: page-break-before, page-break-after and page-break-inside help to define how a document should behave when printed. Note: You cannot use this property on an empty <div> or on absolutely positioned elements.
A possible solution would be to count the number of line breaks (\r\n and \n in the case of a textArea input element), then create a new "page" element, edit the values of both old and new text areas and change the focus to the new text area. Here's a psuedo-JS event handler for this:
function onPageInput(event){
//count lines in original page
var lines = page.value.split(/\r*\n/);
if (lines.length > linesPerPage){
var newPage = addPage(); //returns the new page
page.insertAfter(newPage);
//reset original textArea value
page.value = "";
//populate old textarea and new textarea
page.value = lines.slice(0, linesPerPage).join("\n");
newPage.value = lines.slice(linesPerPage, lines.length).join("\n");
newPage.focus();
}
}
Here's a working example implementation
Note that I used textAreas for simplification. If you want to use a ContentEditable div you will need a method to count the content lines, and break the content into two separate chunks depending on your desired line break. Some existing WYSIWYG libraries might already offer the API for line counting/splitting content without you having to work around the pitfalls of ContentEditable.
Of course - you will still need to handle special cases like deleting pages when the user presses backspace on an empty page, or any other behavior you want.
192
fiddle proof of concept... This is more than an answer, a suggested path to try:
$(document).ready(function(){
var page = {
newLines : 0,
newLinesCheck : function(){
this.newLines = $("#TemplateSubPage").val().split('\n').length - 1;
if(this.newLines < 0){this.newLines = 0;}
console.warn($("#TemplateSubPage").val().split('\n'));
},
newLine : function(){
this.newLines++;
}
};
$(document).keydown(function(k){
//console.log(k.which);
if(k.which == 13){
page.newLine();
console.log(page.newLines);
}
if(k.which == 46 || k.which == 8){// DEL, BKSPS
page.newLinesCheck();
}
});
});
I have to change the editable div to a textarea to allow the \n character to be found but in your fiddle it worked... as I say is a suggestion and doesn't work completely, but may guide you or give you ideas.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
