Подтвердить что ты не робот

Как разбить редактор контента и добавить его на следующей странице

enter image description here Я хочу добавить текущий редактор содержимого на следующую страницу, когда текущая страница будет завершена

Вот моя проверка скрипки

Любая помощь будет ощутимой

Описание

На самом деле я создаю текстовый редактор, в котором я добавил нижний колонтитул и редактор содержимого, но теперь я хочу добавить новую страницу с таким же верхним и нижним колонтитулами, но хочу добавить свой текущий редактор содержимого страницы.

   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>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button id="btnPrint">
            Print preview</button>&nbsp;&nbsp;&nbsp;&nbsp;
        <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>&nbsp;&nbsp;&nbsp;&nbsp;
        </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>
4b9b3361

ОТВЕТЫ

Ответ 1

Возможным решением было бы подсчитать количество разрывов строк (\r\n и \n в случае элемента ввода textArea), а затем создать новый элемент "страница", отредактировать значения как старых, так и новых текстовых областей и изменить фокус на новую текстовую область. Здесь обработчик события psuedo-JS для этого:

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();
  }
}

Здесь работает рабочая примерная реализация

Обратите внимание, что для упрощения я использовал textAreas. Если вы хотите использовать div ContentEditable, вам понадобится метод подсчета строк контента и разбивка содержимого на два отдельных фрагмента в зависимости от желаемого разрыва строки. Некоторые существующие библиотеки WYSIWYG могут уже предлагать API для подсчета/разделения строк без необходимости работать с ловушками ContentEditable.

Конечно, вам все равно придется обрабатывать специальные случаи, такие как удаление страниц, когда пользователь нажимает кнопку "backspace" на пустой странице или любое другое поведение, которое вы хотите.

Ответ 2

скриптировать доказательство концепции... Это больше, чем ответ, предлагаемый путь:

$(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();
            }
          });
    });

Мне нужно изменить редактируемый div в текстовое поле, чтобы можно было найти символ \n, но в вашей скрипке он работал... как я уже сказал, это предложение и не работает полностью, но может направить вас или дайте вам идеи.