正文

wangEditor 图片上传表格编辑功能操作指南：开发者必备插件大全

AI资讯V管理员 /阅读
07 04
? 手把手教你玩转 wangEditor 图片上传与表格编辑，附开发者私藏插件库

作为一个在前端圈摸爬滚打多年的老司机，我敢打包票，wangEditor 绝对是目前最被低估的富文本编辑器之一。它的图片上传和表格编辑功能简直是为开发者量身定制的，今天就把压箱底的经验全抖落出来，保证你看完直呼内行。

?️ 图片上传：让文件管理像搭积木一样简单


用过其他编辑器的都知道，图片上传要么限制多多，要么配置复杂。但 wangEditor 的图片上传功能就像开了挂，三步就能搞定。首先在初始化的时候，把customUploadImg这个配置项安排上，直接告诉编辑器图片要传到哪里。比如这样：

javascript
editor.customConfig.customUploadImg = function(files, insert) {
  // 这里写你的上传逻辑
  // files是选中的文件，insert是插入图片的函数
}

要是你想给上传加点料，比如限制文件大小或者格式，直接在onBeforeUpload里做手脚。举个栗子，想限制图片不超过 2M，就加这么一句：

javascript
editor.customConfig.uploadImgMaxSize =  *  * ;

有些细心的朋友可能发现了，上传图片的时候还能给请求头塞点私货。像这样：

javascript
editor.customConfig.uploadImgHeaders = {
  'Authorization': 'Bearer your_token'
}

这样后台就能通过请求头验证身份，安全性直接拉满。

? 表格编辑：从入门到精通的进阶之路


表格编辑这块，wangEditor 更是把易用性做到了极致。插入表格的时候，直接调用insertTable方法，行数和列数随便你填。要是觉得默认的表格样式太单调，别急，CSS 分分钟让它改头换面。

css
.wangEditor-container .wangEditor-txt table {
  border-collapse: collapse;
  width: %;
}
.wangEditor-container .wangEditor-txt table td,
.wangEditor-container .wangEditor-txt table th {
  border: px solid #ddd;
  padding: px;
}

说到合并单元格，很多人可能觉得得写一堆代码。其实根本不用，直接在 HTML 里用rowspan和colspan属性就行。比如这样：

html
<table>
  <tr>
    <td rowspan="2">合并两行td>
    <td>第一行第二列td>
  tr>
  <tr>
    <td>第二行第二列td>
  tr>
table>

要是你想让用户能直接在编辑器里拖拽调整列宽，就得动点小脑筋了。可以监听鼠标事件，当鼠标在表格列线上移动时，动态修改col元素的宽度。具体实现可以参考这个思路：

javascript
editor.txt.html('
第一列第二列
');

?️ 开发者必备插件：让编辑器变身全能战士


光靠基础功能还不够？那就得请出插件大军了。首推的就是图片上传插件@wangeditor/plugin-upload-image，它支持断点续传和进度显示，用户体验直接起飞。安装也很简单，一行命令搞定：

bash
yarn add @wangeditor/plugin-upload-image

要是你经常和公式打交道，@wangeditor-next/plugin-formula绝对是你的救星。它支持 LaTeX 语法，写起数学公式来就像在 Word 里一样顺滑。用的时候记得先注册插件：

javascript
import { registerPlugin } from '@wangeditor/core';
import { FormulaPlugin } from '@wangeditor-next/plugin-formula';

registerPlugin(FormulaPlugin);

还有链接卡片插件@wangeditor/plugin-link-card，只要粘贴链接，就能自动生成好看的卡片。像这样：

javascript
editor.customConfig.linkCard = true;

? 避坑指南：这些陷阱千万别踩


用 wangEditor 的时候，有几个坑得特别注意。比如在 Vue 项目里，要是遇到Cannot set property 'uploadImgShowBase64' of undefined这个错误，大概率是版本更新导致的。这时候把customConfig换成config就好了。

javascript
// 旧写法
editor.customConfig.uploadImgShowBase64 = true;
// 新写法
editor.config.uploadImgShowBase64 = true;

还有表格编辑的时候，要是发现合并单元格后样式乱了，记得检查colgroup元素有没有正确生成。另外，动态调整列宽的时候，要给列设置一个最小宽度，不然可能会出现负数。

? 高级玩法：让编辑器彻底为你所用


想让编辑器更贴合项目需求？那就得自定义插件了。比如做一个合并单元格的插件，先创建一个菜单，然后在点击事件里处理合并逻辑。具体代码可以参考这个：

javascript
const TableMergePlugin = {
  id: 'tableMerge',
  type: 'menu',
  title: '合并单元格',
  iconSvg: '...',
  click() {
    // 这里写合并单元格的逻辑
  }
};

要是你想让图片上传的时候自动压缩，也可以在customUploadImg里加一段压缩代码。比如用canvas把图片压缩到指定尺寸：

javascript
function compressImage(file) {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = URL.createObjectURL(file);
    img.onload = () => {
      const canvas = document.createElement('canvas');
      // 这里设置压缩后的尺寸
      canvas.width = ;
      canvas.height = ;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, , , canvas.width, canvas.height);
      canvas.toBlob((blob) => {
        resolve(blob);
      }, 'image/jpeg', 0.8);
    };
  });
}
javascript
复制
function compressImage(file) {
return new Promise((resolve) => {
const img = new Image();
img.src = URL.createObjectURL(file);
img.onload = () => {
const canvas = document.createElement('canvas');
// 这里设置压缩后的尺寸
canvas.width = ;
canvas.height = ;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, , , canvas.width, canvas.height);
canvas.toBlob((blob) => {
resolve(blob);
}, 'image/jpeg', 0.8);
};
});
}


wangEditor 的图片上传和表格编辑功能远不止这些，只要肯折腾，它能满足你各种奇奇怪怪的需求。从基础配置到高级玩法，再到插件扩展，这篇指南可以说是把家底都掏空了。还等什么，赶紧动手试试，让你的编辑器也飞起来！

【该文章由dudu123.com嘟嘟 ai 导航整理，嘟嘟 AI 导航汇集全网优质网址资源和最新优质 AI 工具】