WangEditor 使用案例

在项目开发中，很多人应该都会用到「富文本编辑器」去实现文章、图片，甚至视频的撰写，WangEditor 在 PC 端还是挺好用的。

我并非是 WangEditor 的作者，只是一个使用者。

在这场 chat 中你能学到：

1. WangEditor 基本的使用
2. 如何完成一个简单完整的案例，用来撰写文章，上传图片
3. 一些可能会遇到的问题剖析

适合人群：对富文本编辑器有兴趣，又不知从何入手的工程师

注：本场 chat 的代码地址如下

后端代码地址 URL：https://gitee.com/hotstrip/uploadImageDemo

前端代码地址 URL：https://gitee.com/hotstrip/WangEditorDemo_front

这场 chat 的目录：

• WangEditor 如何引入到项目中——前端
• 上传图片实现原理
• 图片上传接口实现——后端
• 总结

WangEditor 如何引入到项目中——前端

对于一个不熟悉的组件，如何最快的上手？一般来说，官网和文档是不二选择。官方网站如下：WangEditor

在上面的官网文档上，一共给出了 3 种安装方式：

• 下载源文件 js 引入
• 使用包管理工具引入（诸如 npm 之类）
• 使用在线的 js （CDN）

无论使用哪种方式，原理是一样的，都是加载 js 文件到项目中。本场 chat 使用 Vue.js 做前端开发，因此使用 npm 方式引入是最方便的。

引入方式很简单，安装 Node 环境之后在命令行工具里面输入下面的命令就行：

npm install -S wangeditor /**  * -S 参数表示安装到本地 * 对于 Vue 项目会在 package.json 文件里自动更新依赖， * 之后在别的电脑上运行电脑就无需再次手动安装， * 执行 npm install 命令就可以跟随其他 package.json 中的依赖一起安装了 * /

安装之后如何初始化呢？先不去考虑代码实现，从思维上来讲就 2 个步骤：

• 对于 HTML 需要提供一个 DOM 节点
• 调用 WangEditor 组件的方法，跟上面的 DOM 节点关联

然后创建富文本编辑器就交给 WangEditor 的组件去实现，怎么实现的不用在意，它就像是一个黑盒子，我们给它需要的东西，它就会给我们想要的东西。

理解了思路，那么剩下的就简单了，核心部分代码如下：

/** * 用了