使用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');`
';