Create Plugins

[fabiodellpozzo]

Crie um plugin Plugin para o Trumbowyg

How to reproduce?

Crie o plugin Plugin para o Trumbowyg que exporte arquivos em pdf!

1 - Incluir a Biblioteca jsPDF
Adicione a biblioteca jsPDF ao seu projeto. Você pode incluí-la diretamente do CDN.

2 - Criar o Plugin Export PDF
Crie um arquivo JavaScript para o seu plugin, por exemplo, trumbowyg.exportPDF.js.
// Extender o Trumbowyg com o novo plugin

javascript  
  (function ($) {  
      'use strict';  
       .extend(true,.trumbowyg, {  
            plugins: {  
            exportPDF: {  
            init: function (trumbowyg) {  
            trumbowyg.o.plugins.exportPDF = $.extend(true, {}, {}, trumbowyg.o.plugins.exportPDF || {});
            // Adicionar botão ao Trumbowyg
                            trumbowyg.addBtnDef('exportPDF', {
                                fn: function () {
                                    var doc = new jsPDF();
                                    var content = trumbowyg.$ed.html();
                                    doc.fromHTML(content, 15, 15, {
                                        'width': 170
                                    });
                                    doc.save('documento.pdf');
                                },
                                ico: 'save'
                            });
                        }
                    }
            }
        });
    })(jQuery);

3: Incluir o Plugin no HTML
Inclua o arquivo do plugin no seu HTML e inicialize o Trumbowyg com o plugin.

<title>Editor Trumbowyg com Exportação para PDF</title> 
<textarea id="editor"></textarea> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.25.1/trumbowyg.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script> 
<script src="trumbowyg.exportPDF.js"></script> 
<script> $('#editor').trumbowyg({ btns: [['exportPDF']] // Adicione o botão do plugin }); </script>

Crie o plugin Plugin para o Trumbowyg que exporte arquivos em html!

1: Criar o Plugin export HTML
Crie um arquivo JavaScript para o seu plugin, por exemplo, trumbowyg.exportHTML.js.

javascript  
(function ($) {  
'use strict';
// Extender o Trumbowyg com o novo plugin
$.extend(true, $.trumbowyg, {
    plugins: {
        exportHTML: {
            init: function (trumbowyg) {
                trumbowyg.o.plugins.exportHTML = $.extend(true, {}, {}, trumbowyg.o.plugins.exportHTML || {});

                // Adicionar botão ao Trumbowyg
                trumbowyg.addBtnDef('exportHTML', {
                    fn: function () {
                        var content = trumbowyg.$ed.html();
                        var blob = new Blob([content], {type: "text/html"});
                        var url = URL.createObjectURL(blob);
                        var a = document.createElement('a');
                        a.href = url;
                        a.download = 'documento.html';
                        document.body.appendChild(a);
                        a.click();
                        document.body.removeChild(a);
                        URL.revokeObjectURL(url);
                    },
                    ico: 'export' // Ícone para o botão
                });
            }
        }
    }
});
})(jQuery);

2 - Incluir o Plugin no HTML
Inclua o arquivo do plugin no seu HTML e inicialize o Trumbowyg com o plugin..

<title>Editor Trumbowyg com Exportação para HTML</title> 
<textarea id="editor"></textarea>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.25.1/trumbowyg.min.js"></script> 
 <script src="trumbowyg.exportHTML.js"></script> 
 <script> $('#editor').trumbowyg({ btns: [['exportHTML']] // Adicione o botão do plugin }); </script>

Crie o plugin avançado!

1. Suporte a Markdown
   Adicione a capacidade de exportar o conteúdo do editor para um arquivo Markdown (.md). O Markdown é amplamente usado em ambientes de desenvolvimento e documentação.

2. Previsualização ao Vivo
   Adicione uma funcionalidade de pré-visualização ao vivo que permita aos usuários ver como o documento final ficará em tempo real.

3. Integração com Serviços de Armazenamento em Nuvem
   Permita que os usuários exportem diretamente para serviços como Google Drive, Dropbox, ou OneDrive.

4. Criação de Modelos Personalizados
   Permita que os usuários criem e utilizem modelos personalizados para exportação. Por exemplo, modelos de relatórios, currículos, ou cartas.

5. Exportação para Vários Formatos
   Além de HTML e PDF, você pode adicionar suporte para exportar para formatos como DOCX (Microsoft Word), ODT (OpenDocument Text) ou EPUB (livros eletrônicos).

6. Incorporação de CSS Personalizado
   Permita que os usuários incluam estilos CSS personalizados no documento exportado, oferecendo mais controle sobre a aparência final do documento.

7. Exportação com Notas de Rodapé e Referências
   Adicione funcionalidades para incluir notas de rodapé e referências bibliográficas nos documentos exportados.

8. Compressão de Arquivos
   Permita que os usuários exportem o conteúdo do editor em um arquivo ZIP que inclua o HTML e todos os recursos associados (CSS, imagens, etc.).

9. Suporte a Multilinguagem
   Adicione suporte para exportação em diferentes idiomas, útil em ambientes multilíngues ou em documentos que precisam ser traduzidos.

10. Assinatura Digital
    Implemente a capacidade de adicionar assinaturas digitais aos documentos exportados, garantindo a autenticidade e a integridade do documento.

11. Suporte a Plugins de Terceiros
    Permita que os usuários integrem outros plugins ou scripts diretamente no editor, aumentando as possibilidades de personalização.

12. Ferramentas de Colaboração
    Adicione funcionalidades que permitam a colaboração em tempo real, onde múltiplos usuários podem editar e exportar o documento simultaneamente.

Exemplo de Integração Avançada: Exportação com CSS Personalizado

trumbowyg.exportHTML.js

javascript  
    (function ($) {  
    'use strict';
    $.extend(true, $.trumbowyg, {
        plugins: {
            exportHTML: {
                init: function (trumbowyg) {
                    trumbowyg.o.plugins.exportHTML = $.extend(true, {}, {}, trumbowyg.o.plugins.exportHTML || {});
    
                    trumbowyg.addBtnDef('exportHTML', {
                        fn: function () {
                            var cssContent = '<style>body { font-family: Arial, sans-serif; }</style>';
                            var content = trumbowyg.$ed.html();
                            var completeContent = '<html><head>' + cssContent + '</head><body>' + content + '</body></html>';
                            var blob = new Blob([completeContent], {type: "text/html"});
                            var url = URL.createObjectURL(blob);
                            var a = document.createElement('a');
                            a.href = url;
                            a.download = 'documento.html';
                            document.body.appendChild(a);
                            a.click();
                            document.body.removeChild(a);
                            URL.revokeObjectURL(url);
                        },
                        ico: 'export'
                    });
                }
            }
        }
    });
})(jQuery);

Crie o plugin advancedExport !

1: Estrutura do Plugin
Crie o arquivo JavaScript para o seu plugin, por exemplo, trumbowyg.advancedExport.js.

2: Incluir Bibliotecas Necessárias

<title>Editor Trumbowyg com Exportação Avançada</title> <textarea id="editor"></textarea> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.25.1/trumbowyg.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html-docx-js/0.4.0/html-docx.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/turndown/7.0.0/turndown.min.js"></script> 
<script src="trumbowyg.advancedExport.js"></script`>

3: Criar o Plugin Avançado trumbowyg.advancedExport.js

javascript  
(function ($) {  
'use strict';
// Extender o Trumbowyg com o novo plugin
$.extend(true, $.trumbowyg, {
    plugins: {
        advancedExport: {
            init: function (trumbowyg) {
                trumbowyg.o.plugins.advancedExport = $.extend(true, {}, {}, trumbowyg.o.plugins.advancedExport || {});

                // Adicionar botões ao Trumbowyg
                trumbowyg.addBtnDef('exportPDF', {
                    fn: function () {
                        var content = trumbowyg.$ed.html();
                        var doc = new jsPDF();
                        doc.fromHTML(content, 15, 15, {
                            'width': 170
                        });
                        doc.save('documento.pdf');
                    },
                    ico: 'save'
                });

                trumbowyg.addBtnDef('exportHTML', {
                    fn: function () {
                        var content = trumbowyg.$ed.html();
                        var blob = new Blob([content], {type: "text/html"});
                        var url = URL.createObjectURL(blob);
                        var a = document.createElement('a');
                        a.href = url;
                        a.download = 'documento.html';
                        document.body.appendChild(a);
                        a.click();
                        document.body.removeChild(a);
                        URL.revokeObjectURL(url);
                    },
                    ico: 'export'
                });

                trumbowyg.addBtnDef('exportMarkdown', {
                    fn: function () {
                        var content = trumbowyg.$ed.html();
                        var turndownService = new TurndownService();
                        var markdown = turndownService.turndown(content);
                        var blob = new Blob([markdown], {type: "text/markdown"});
                        var url = URL.createObjectURL(blob);
                        var a = document.createElement('a');
                        a.href = url;
                        a.download = 'documento.md';
                        document.body.appendChild(a);
                        a.click();
                        document.body.removeChild(a);
                        URL.revokeObjectURL(url);
                    },
                    ico: 'export'
                });

                trumbowyg.addBtnDef('exportDOCX', {
                    fn: function () {
                        var content = trumbowyg.$ed.html();
                        var converted = htmlDocx.asBlob(content);
                        saveAs(converted, 'documento.docx');
                    },
                    ico: 'export'
                });

                trumbowyg.addBtnDef('exportODT', {
                    fn: function () {
                        alert('Funcionalidade de exportação para ODT ainda em desenvolvimento.');
                    },
                    ico: 'export'
                });

                trumbowyg.addBtnDef('exportEPUB', {
                    fn: function () {
                        alert('Funcionalidade de exportação para EPUB ainda em desenvolvimento.');
                    },
                    ico: 'export'
                });
            }
        }
    }
});
})(jQuery);

4: Incluir e Inicializar o Plugin no HTML

<title>Editor Trumbowyg com Exportação Avançada</title> 
 <textarea id="editor"></textarea> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.25.1/trumbowyg.min.js"></script> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/html-docx-js/0.4.0/html-docx.min.js"></script> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/turndown/7.0.0/turndown.min.js"></script> 
 <script src="trumbowyg.advancedExport.js"></script> 
 <script> $('#editor').trumbowyg({ btns: [['exportPDF', 'exportHTML', 'exportMarkdown', 'exportDOCX', 'exportODT', 'exportEPUB']] // Adicione os botões