WordPaster × wangEditor3 在线演示

<!-- 1. 引入 wangEditor3 与 WordPaster 资源 -->
<link rel="stylesheet" href="WordPaster/css/WordPaster.css" />
<script src="/products/wordpaster2.1/wangeditor/wangEditor.min.js"></script>
<script src="/products/wordpaster2.1/wangeditor/WordPaster/js/w.js"></script>

<!-- 2. 页面容器 -->
<div id="editor"><p>初始化内容…</p></div>

<!-- 3. 初始化：加载 WordPaster 并实例化 wangEditor3 -->
<script type="text/javascript">
  WordPaster.getInstance({
    PostUrl: "/api/upload",        // 你的图片上传接口
    ExePath: "/webapp/wordpaster/pack.aspx"
  });

  var edt = new wangEditor('#editor');   // wangEditor3 暴露的全局变量
  edt.customConfig.zIndex = 100;
  edt.create();

  // 在工具栏追加 WordPaster 系列按钮
  var tool = $('#editor').find('.w-e-toolbar');
  tool.append(
    '<div class="w-e-menu wordpaster" title="Word一键粘贴"></div>' +
    '<div class="w-e-menu importwordtoimg" title="Word转图片"></div>' +
    '<div class="w-e-menu imgsimport" title="批量传图"></div>' +
    '<div class="w-e-menu netpaster" title="网络图片一键导入"></div>' +
    '<div class="w-e-menu wordimport" title="导入Word文档"></div>' +
    '<div class="w-e-menu excelimport" title="导入Excel文档"></div>' +
    '<div class="w-e-menu pptimport" title="导入PPT文档"></div>' +
    '<div class="w-e-menu pdfimport" title="导入PDF文档"></div>'
  );

  // 绑定按钮点击 → 交由 WordPaster 处理
  tool.find('.wordpaster').click(function(){ WordPaster.getInstance().SetEditor(edt).Paste(); });
  tool.find('.importwordtoimg').click(function(){ WordPaster.getInstance().SetEditor(edt).importWordToImg(); });
  tool.find('.imgsimport').click(function(){ WordPaster.getInstance().SetEditor(edt).ImportImgs(); });
  tool.find('.netpaster').click(function(){ WordPaster.getInstance().SetEditor(edt).UploadNetImg(); });
  tool.find('.wordimport').click(function(){ WordPaster.getInstance().SetEditor(edt).importWord(); });
  tool.find('.excelimport').click(function(){ WordPaster.getInstance().SetEditor(edt).importExcel(); });
  tool.find('.pptimport').click(function(){ WordPaster.getInstance().SetEditor(edt).importPPT(); });
  tool.find('.pdfimport').click(function(){ WordPaster.getInstance().SetEditor(edt).ImportPDF(); });
</script>

# 后端图片上传接口约定（示例：返回 JSON）
POST /api/upload
Request: multipart/form-data  (file: 图片二进制)
Response:
{
  "state": "SUCCESS",
  "url": "https://your-cdn.com/upload/2026/08/abc.png",
  "original": "word-image.png"
}
# WordPaster 会自动把 Word 内嵌图片转交该接口上传，
# 并将返回 url 写回编辑器，无需前端手工处理。