使用webpack
最后更新于:2022-04-01 23:42:53
### v2.1.12 版本及更高版本的设置方法
`v2.1.12`版本开始,编辑器的js代码可直接`require`编辑器的`css`文件,也可直接使用`npm`中的`jquery`。
详细的demo代码可看这里:https://github.com/wangfupeng1988/wangEditor2-width-webpack
**使用 npm 环境**
如果你使用`npm install wangeditor --save`安装了编辑器,并且你的项目中使用了npm作为插件的版本管理工具,那么直接在你使用时`require('wangeditor')` 即可。编辑器已经自动引入了`jquery`和css文件。
如果不使用 npm 你可能会需要考虑以下两个情况:
**修改 css 文件路径**
编辑器`wangEditor.js`中默认加载的css路径是`../css/wangEditor.css`,如果你的项目环境中的wangEditor文件目录,那么这个配置就无需改动。
如果需要改动css路径,请在**引入wangEditor.js文件之前**,通过修改`window.wangEditorCssPath`来修改,而且要改成**相对路径**。例如:
```js
window.wangEditorCssPath = '../../../css/wangEditor.css'
require('../../js/wangEditor.js')
```
**修改 jquery 文件路径**
编辑器默认情况下会认为你使用了npm生态,所以代码中直接`require('jquery')`了。但是如果你需要自己修改一下jquery的文件路径,请在**引入wangEditor.js文件之前**,通过修改`window.wangEditorJQueryPath`来修改,而且要改成**相对路径**。例如:
```js
window.wangEditorJQueryPath = '../../lib/jquery.js'
require('../../js/wangEditor.js')
```
---
### v2.0.16 至 v2.1.11 的设置方法
wangEditor编辑器从`v2.0.16`版本开始支持`webpack`,使用示例如下。
首先,创建一个名为`wangEditor-jquery.js`的文件,和`wangEditor.js`或者`wangEditor.min.js`放在同一个目录下。
然后,`wangEditor-jquery.js`文件中写入以下内容:
```js
var $ = require('./jquery-2.2.1.js'); // **注意,这里请修改jquery的正确地址,重要!**
module.exports = $;
```
修改完`jquery`的地址之后,保存。这样wangEditor即可在`webpack`中使用了。例如 `var E = require('./lib/wangEditor.js');`
';