Я хочу напечатать содержимое области TinyMCE в формате PDF - PullRequest
Новая
       13

Я хочу напечатать содержимое области TinyMCE в формате PDF

1 голос
/ 13 апреля 2020

Хорошо, у меня есть идея проекта, в котором я хочу написать проект в порядке, отличном от того, который будет напечатан. Например: запись в 3,1,2 порядке, но печать в 1,2,3. Идея состоит в том, чтобы писать научные проекты и статьи в понятном порядке, чтобы было легче писать. Я создал форму, используя HTML и текстовую область TinyMCE.

Это код, который я использую: 

<script src="https://cdn.tiny.cloud/1/b9w5wbhhiy67clv3p6t1cmtyjia9h9g3b2ggjq3vil7ge215/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

<script type="text/javascript">
  tinymce.init({
    selector: "textarea",
    plugins: [
      "advlist autolink lists link image charmap print preview anchor",
      "searchreplace visualblocks code fullscreen",
      "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    setup: function(editor) {
      editor.on('init', function() {
        this.setContent('The init function knows on which editor its called - this is for ' + editor.id);
      });
    }
  });
</script>

<body>
  <form method="post">
    <textarea class='tiny-mce' id='editor1'></textarea>
    <textarea class='tiny-mce' id='editor2'></textarea>
  </form>

  <input type="button" id="button" value="Gerar Projeto em PDF" />
</body>

Это создает две (из многих) текстовых областей с богатым форматированием Однако я просто не могу извлечь содержимое текстовых областей и поместить их в PDF-файл, который печатается пустым.

Это код JS для одной текстовой области: 

<script>
  $('#button').click(function() {
    var doc = new jsPDF('p', 'pt', 'a4');
    var obj_g = $('#editor1').val();

    doc.setFontSize(12);
    doc.setTextColor(92, 92, 92);
    doc.text(23, 41, obj_g);

    doc.save('projeto.pdf');
  });
</script>

Как извлечь содержимое текстовых областей в TinyMCE и распечатать их в формате PDF?

Заранее спасибо

1 Ответ

0 голосов
/ 13 апреля 2020

Вы очень близки. Просто нужно вызвать tinyMCE.triggerSave(); перед вызовом функции .val(), поскольку tinyMCE не сохраняет значение текстовой области, которое она генерирует, пока вы не вызовете метод .triggerSave(). 

<script>
    $('#button').click(function() {
        tinyMCE.triggerSave(); // Add this line
        var doc = new jsPDF('p', 'pt', 'a4');
        var obj_g = $('#editor1').val();

        doc.setFontSize(12);
        doc.setTextColor(92, 92, 92);
        doc.text(23, 41, obj_g);
        doc.save('projeto.pdf');
    });
</script>

ОБНОВЛЕНО 14/14/2020:

Ниже приведен полный рабочий код для меня, но вы можете найти часть сценария, которая включает в себя, как решить две проблемы в вашем последнем комментарии (сохраните форматирование HTML в PDF после triggerSave (), а также установка полей для содержимого PDF) внизу кода. Приведенный ниже код включает решение, измененное в соответствии с вашим кодом, предоставленным Well Wisher здесь: Как правильно использовать библиотеку jsPDF 

<!DOCTYPE html>
<body>
  <form method="post">
    <textarea class='tiny-mce' id='editor1'></textarea>
    <textarea class='tiny-mce' id='editor2'></textarea>
  </form>

  <input type="button" id="button" value="Gerar Projeto em PDF" />
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<script src="https://cdn.tiny.cloud/1/b9w5wbhhiy67clv3p6t1cmtyjia9h9g3b2ggjq3vil7ge215/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

<script type="text/javascript">
  tinymce.init({
    selector: "textarea",
    plugins: [
      "advlist autolink lists link image charmap print preview anchor",
      "searchreplace visualblocks code fullscreen",
      "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    setup: function(editor) {
      editor.on('init', function() {
        this.setContent('The init function knows on which editor its called - this is for ' + editor.id);
      });
    }
  });
</script>



<script>
    $('#button').click(function() {
        tinyMCE.triggerSave(); // Add this line
        var doc = new jsPDF('p', 'pt', 'a4');
        var obj_g = tinyMCE.get('editor1').getContent(); // Use this tinyMCE getContent method to get the editor content

        // See Reference from Well Wisher: https://stackoverflow.com/questions/16858954/how-to-properly-use-jspdf-library
        var margins = {
            top: 50,
            bottom: 50,
            left: 50,
            width: 800
        };

        doc.fromHTML(
            obj_g, // HTML string or DOM elem ref.
            margins.left, // x coord
            margins.top, { // y coord
                'width': margins.width, // max width of content on PDF
            },

            function (dispose) {
                // dispose: object with X, Y of the last line add to the PDF 
                //          this allow the insertion of new lines after html
                doc.save('projeto.pdf');
            }, margins
        );

    });
</script>

Ссылка: Как правильно использовать библиотеку jsPDF

...