How to break content editor and append it on next page

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.

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.