tinymce-pdf.js

// show pdf in the editor 
// pdf is uploaded using the video/media button
// then its tag is converted from video to pdf at beforeSetContent
 
 tinymce.init({
                selector: 'textarea#Description',

                plugins: 'print preview fullpage paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons ',

                menubar: 'file edit view insert format tools table help',
                toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview print | insertfile image media template link anchor codesample | ltr rtl',
                toolbar_sticky: true,

                importcss_append: true,
                file_picker_types: 'file image media',
                file_picker_callback: function (callback, value, meta) {
                    /* Provide file and text for the link dialog */
                    if (meta.filetype === 'file') {

                        callback('https://www.google.com/logos/google.jpg', { text: 'My text' });
                    }

                    /* Provide image and alt text for the image dialog */
                    if (meta.filetype === 'image') {
                      callback('https://www.google.com/logos/google.jpg', { alt: 'My alt text' });
                    }

                    /* Provide alternative source and posted for the media dialog */
                    if (meta.filetype === 'media') {
                        // callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.google.com/logos/google.jpg' });

                        // Trigger click on file element
                        jQuery("#fileupload").trigger("click");
                        $("#fileupload").unbind('change');
                        // File selection
                        jQuery("#fileupload").on("change", function () {
                            var file = this.files[0];
                            var reader = new FileReader();

                            // FormData
                            var fd = new FormData();
                            var files = file;
                            fd.append("file", files);
                            fd.append('filetype', meta.filetype);

                            var filename = "";

                            // AJAX
                            var url = '@BaseURL/elearning/File/EditorUpload';
                            console.log('url - ', url);

                            jQuery.ajax({
                                url: url,
                                type: "post",
                                data: fd,
                                contentType: false,
                                processData: false,
                                async: false,
                                success: function (response) {
                                    console.log('filename-', response);
                                    filename = response.location;
                                }
                            });

                            reader.onload = function (e) {

                                callback(filename);
                                this.insertContent('<object>' + filename + '</object>');

                            };
                            reader.readAsDataURL(file);
                        });
                    }
                },

                width: 800,
                height: 800,
                image_caption: true,
                quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
                noneditable_noneditable_class: "mceNonEditable",
                toolbar_drawer: 'sliding',
                contextmenu: "link image imagetools table",
                images_upload_url: 'your_upload_url',
                images_upload_base_path: 'your_upload_url',
                images_upload_credentials: true,
                relative_urls : false,
                remove_script_host : false,
                convert_urls: true,
                media_live_embeds: true,

                // here where it convers from video to object
                init_instance_callback: function (editor) {

                    editor.on('BeforeSetContent', function (e) {
                        console.log('before - ', e.content);

                        if (e.content.indexOf("video ") > 0) {
                            if (e.content.indexOf(".pdf") > 0) {
                                e.content = e.content.replace("<video", "<div");

                                var width = e.content.match("width=\"(.*)\" height");
                                var height = e.content.match("height=\"(.*)\" controls");
                                //console.log('width - ', width, ' height - ', height);

                                e.content = e.content.replace("controls=\"controls\"", "");

                                e.content = e.content.replace("<source", "<object");
                                e.content = e.content.replace("src=", "data=");

                                e.content = e.content.replace("</video", "</div");
                                e.content = e.content.replace("/>", "type=\"application/pdf\" width=\"" + width[1] + "\" height=\"" + height[1] + "\"  ></object>");
                            }

                            console.log('after - ', e.content);
                        }
                    });
                },
            });