1.放入静态资源并配置

首先把官网下载的Ueditor资源，放入静态资源src/static中。

修改ueditor.config.js中的window.UEDITOR_HOME_URL配置，如下图：

2.引入

在main.js中引入

import '../static/UE/ueditor.config.js'import '../static/UE/ueditor.all.min.js'import '../static/UE/lang/zh-cn/zh-cn.js'import '../static/UE/ueditor.parse.min.js'

 

3.开发公共组件

开发公共组件，可设置填充内容defaultMsg，配置信息config(宽度和高度等)，并提供获取内容的方法。

 

4.使用

当我们需要使用富文本编辑器时，直接调用公共组件即可

 

效果如下：

5.报错

ESlint报错

严格模式报错

部分人使用时出现以下报错：

Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them...

这个问题是因为项目中的使用的babel默认添加了use strict造成，可参考 https://segmentfault.com/q/1010000007415253

我采用的是链接中答案的第三种方式：添加了babel-plugin-transform-remove-strict-mode，并在.babelrc里添加下列代码

{  "plugins": ["transform-remove-strict-mode"]}