I want to print the content of a TinyMCE area in PDF

Question

Ok, so i have this idea of project in which I want to write a project in an order different of the order that is going to be printed. For example: writing in 3,1,2 order, but printing in 1,2,3. The idea is to write scientific projects and articles in a meaningful order, to make it easier to write. I've created a form using HTML and TinyMCE text area.

This is the code I'm using:

<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>

This creates two (of many) textareas with rich formatting, however, I just can not extract the content of the textareas and put them into the PDF, that is printed empty.

This is the JS code for one textarea:

<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>

How can I extract the content of the textareas in TinyMCE and print them in the PDF?

Thanks in advance

hiew1 · Answer 1 · 2020-04-14T17:26:17.460

You are very close. Just need to call tinyMCE.triggerSave(); before calling the .val() function since tinyMCE doesn't save the textarea's value it generates until you call the .triggerSave() method.

<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>

UPDATED 4/14/2020:

Below is the complete working code for me, but you can find the script part that includes how to resolve the two problems in your last comment (keep the HTML formatting in PDF after triggerSave() as well as setting margins for the PDF content) at the bottom of the code. The code below includes a solution modified to suit your code provided by Well Wisher here: How to properly use jsPDF library

<!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>

Reference: How to properly use jsPDF library

Fabulous! It worked perfectly, however, the output is like this: `
The init function knows on which editor its called - this is for editor1
` How can I keep the formatting made in the tinyMCE box and create margins for the PDF document? Thanks again! — Antonio Carlos Filho, Apr 13 '20 at 14:30
Glad that it worked! I updated the answer to keep the formatting as well as create margins for the PDF document. With a reference to https://stackoverflow.com/questions/16858954/how-to-properly-use-jspdf-library If it helps would you upvote or accept the answer? Thanks! — hiew1, Apr 14 '20 at 17:31
Very good! I made serious advancements and its working great now. Thank you very much for the support! — Antonio Carlos Filho, Apr 18 '20 at 23:12
This is really great work. Only thing I am having issues with is links. The URL is not clickable in processed PDF. Any ideas to get me back on track? — Woody, Sep 25 '22 at 00:58

I want to print the content of a TinyMCE area in PDF

1 Answers1