####前端配置server地址
---
上传文档,需要为 `editor.config.uploadImgUrl` 参数配置 server 端的地址。配置了之后,编辑器就自动显示上传功能(否则不显示)。注意,要在 `editor.create()` 之前完成配置。
![](https://box.kancloud.cn/2016-01-29_56ab6d083c7f1.png)
另外 - 1,如果需要在上传的同时要传递一些自定义参数(如`token`)到后台,可以通过`editor.config.uploadParams`来配置,后台可以通过`requrest`来获取这些参数的值。
另外 - 2,如果需要在上传图片时候自定义设置`request`的`headers`,可通过`editor.config.uploadHeaders`来配置。
另外 - 3,如果你只需要上传图片功能,而不需要插入网络图片功能,在`editor.create()`之前配置`editor.config.hideLinkImg = true;`即可。前提是你已经配置好了图片上传功能,`v2.1.14`版本开始支持。
代码示例如下:
```html
<div id="div1">
<p>请输入内容...</p>
</div>
<!--这里引用jquery和wangEditor.js-->
<script type="text/javascript">
var editor = new wangEditor('div1');
// 上传图片(举例)
editor.config.uploadImgUrl = '/upload';
// 配置自定义参数(举例)
editor.config.uploadParams = {
token: 'abcdefg',
user: 'wangfupeng1988'
};
// 设置 headers(举例)
editor.config.uploadHeaders = {
'Accept' : 'text/x-json'
};
// 隐藏掉插入网络图片功能。该配置,只有在你正确配置了图片上传功能之后才可用。
editor.config.hideLinkImg = true;
editor.create();
</script>
```
---
####server端获取文件数据
- **建议通过index获取:**
建议通过index的方式从`request.files`中获取,例如`var file = request.files[0];`。不同的后端语言语法可能不同,可根据实际情况调整。
- **通过name获取:**
如果想要通过`name`从`request.files`中获取文件,可通过以下方式:
- `var file = request.files['wangEditorH5File']; // 获取 h5 方式上传的文件`
- `var file = request.files['wangEditorFormFile']; // 获取 form 方式上传的文件`
- `var file = request.files['wangEditorPasteFile']; // 获取粘贴截图 方式上传的文件`
- `var file = request.files['wangEditorDragFile']; // 获取拖拽上传的文件`
不同的后端语言语法可能不同,可根据实际情况调整。
注意,如果你觉得以上四个`name`比较繁琐,你完全可以通过配置`editor.config.uploadImgFileName`来将四个`name`统一为一个。例如,无论是哪种方式上传,你都想通过`myFileName`获取,可以这样配置:`editor.config.uploadImgFileName = 'myFileName'`
- **获取自定义参数**
如果你通过`editor.config.uploadParams`配置了上传时的自定义参数,后台可以通过`request`获取。注意,这里配置的参数要和图片文件一起上传,因此要使用`multipart/form-data`的方式上传(如下图),后台接收的时候要注意。
![](https://box.kancloud.cn/2016-05-28_574965f7d417d.png)
---
- **自定义设置headers**
可通过`editor.config.uploadHeaders`设置上传图片时`request`的`headers`,上面的代码示例中设置了`'Accept' : 'text/x-json'`,那么上传图片时候会有如下效果:
![](https://box.kancloud.cn/2016-05-28_574966007fad3.png)
####server端返回规则
- **上传成功:**
上传成功后,server 端需要返回(即:`response`)图片的 url 地址,例如:
```
"http://xxx.com/imgs/abc.png"
```
- **上传失败:**
上传失败后,server 端需要返回(即:`response`)`'error|错误信息提示...'`格式的字符串。其中的错误信息提示,可以自己设置。例如:
```
"error|服务器端错误"
```
- 关于wangEditor
- 遇到问题如何解决和提问【重要】
- 开始使用
- 下载
- 创建页面
- 生成编辑器(使用ID)
- 生成编辑器(使用element)
- 调整尺寸
- 销毁与恢复
- 一个页面多个编辑器
- 内容处理
- 初始化内容
- 获取内容
- 追加内容
- 清空内容
- 用 editor.$txt 做其他内容处理
- onchange事件
- 禁用/启用
- 参数配置
- 自定义菜单
- 自定义颜色、字体、字号
- 自定义表情
- 切换语言
- 百度地图key
- 菜单栏吸顶
- 配置全屏的z-index
- 关闭浏览器打印log
- 关闭过滤javascript
- 关闭粘贴过滤样式
- 只粘贴纯文本
- 插入代码-配置默认语言
- 自定义编辑器样式
- 自定义颜色
- 自定义菜单UI
- 自定义表格、引用、代码的样式
- 代码高亮样式
- 图片上传
- 使用前必读
- 支持情况
- 配置说明
- log提示辅助排错
- 后台代码示例
- C#
- java - 例1
- java - 例2
- php
- nodejs
- python
- 自定义上传事件
- 集成plupload插件
- 集成七牛云存储
- 跨域上传
- 上传图片出错时的解决步骤
- 使用模块定义
- 使用require.js
- 使用seajs
- 使用webpack
- 插件开发
- 对象结构
- 常用API
- 全局API
- 对象API
- 基础API
- 选区API
- 命令API
- 扩展一个菜单
- 『缩进』菜单
- 『行高』菜单
- 『插入符号』菜单
- 开发一个插件
- 常见问题
- 关于markdown
- 关于上传附件
- 关于背景图片
- 关于显示压缩图片
- 集成到React
- 集成到angular
- 集成到vue.js
- 如何避免与项目中的css冲突
- xss过滤
- 如何插入视频链接
- 关于mobile端编辑器
- 查看源码第一行有空格