pdf export of kendo-editor

Question

I want to export the content of the kendo editor with the pdfExport event and additionally add somme text as a Header.

And I want finally to go back to the original value which is the the first content.

I tried to use the e.promise.done as an event to detect the export termination.

         var meetingsEditorParams = {
                tools: ['bold', 'italic', 'underline', 'strikethrough', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'insertUnorderedList', 'insertOrderedList', 'indent', 'outdent', 'createTable', 'addRowAbove', 'addRowBelow', 'addColumnLeft', 'addColumnRight', 'deleteRow', 'deleteColumn', 'formatting' ,'pdf'], 

                stylesheets: ["../../../../Content/css/pdf-export-styles.css"],
                pdf: {
                    fileName: "RECAP-TO-PRINT : " + self.fileName + ".pdf",         
                    paperSize: "a4",
                    margin: {
                        bottom: 20,
                        left: 20,
                        right: 20,
                        top: 20
                    }
                },
                pdfExport: function (e) {

           //add the header to the original content and export it 
           self.meetingEditor.value("Header To Insert" + self.Content());
          // go back to the original content after the export
          e.promise.done(self.meetingEditor.value(self.Content()));   

                }
                ,
                change: function (e) {
                    console.log(self.meetingEditor.value());
                    self.Content(self.meetingEditor.value());
                }
            };

            self.meetingEditor = $("#meetingEditor").kendoEditor(meetingsEditorParams).data("kendoEditor");

the problem is that I always get the original content exported and it ignores the header.

Answer 1

I think you can't change PDF content there, by the time pdfExport() gets called it's probably too late.

You could use $("#yourEditor").getKendoEditor().saveAsPDF() on a custom button click instead of the built-in PDF Export button to generate your PDF. Before that, you could change it anyway you want it to look in the generated PDF, and then on completion of the promise, you could change it back.

Something like this, maybe (haven't tested this):

$("#btnPdfExport").kendoButton({
  click:function(){
    // change it here
    $("#yourEditor").getKendoEditor().saveAsPDF();
  }
});

And then in say the pdfExport event you can change it back when the promise is done like in your code in the question.