Trumbowyg编辑器插件开发指南：实现高级导出功能

2025-06-16 09:12:12作者：钟日瑜

概述

Trumbowyg是一款轻量级的WYSIWYG编辑器，以其简洁的界面和强大的扩展性受到开发者青睐。本文将详细介绍如何为Trumbowyg开发导出功能插件，包括基础导出和高级导出功能的实现。

基础导出功能实现

PDF导出插件开发

PDF导出是编辑器常见的功能需求，我们可以通过集成jsPDF库来实现这一功能。

核心代码实现：

(function ($) {
  'use strict';
  $.extend(true, $.trumbowyg, {
    plugins: {
      exportPDF: {
        init: function (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);

实现原理：

使用jsPDF库创建PDF文档对象
获取编辑器HTML内容
将HTML内容转换为PDF格式
提供下载功能

HTML导出插件开发

HTML导出功能相对简单，主要利用浏览器的Blob API实现文件下载。

核心代码实现：

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'
});

高级导出功能实现

多格式导出插件

我们可以开发一个综合性的导出插件，支持多种文档格式的导出。

支持格式：

PDF（使用jsPDF）
HTML（原生实现）
Markdown（使用Turndown库）
DOCX（使用html-docx-js库）
ODT（需额外开发）
EPUB（需额外开发）

插件架构设计：

$.extend(true, $.trumbowyg, {
  plugins: {
    advancedExport: {
      init: function (trumbowyg) {
        // 初始化各导出按钮
        this.addPDFExport(trumbowyg);
        this.addHTMLExport(trumbowyg);
        this.addMarkdownExport(trumbowyg);
        this.addDOCXExport(trumbowyg);
      },
      
      addPDFExport: function(trumbowyg) {
        // PDF导出实现
      },
      
      addHTMLExport: function(trumbowyg) {
        // HTML导出实现
      },
      
      // 其他格式导出方法...
    }
  }
});

Markdown导出实现

Markdown导出需要使用Turndown库将HTML转换为Markdown格式。

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"});
    // 下载实现...
  },
  ico: 'export'
});

DOCX导出实现

DOCX导出需要使用html-docx-js库将HTML转换为Word文档格式。

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

插件优化与扩展

样式定制功能

可以为导出的文档添加自定义CSS样式，提升文档呈现效果。

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