wangeditor上传附件
时间: 2023-09-09 21:12:24 浏览: 126
上传附件
对于wangeditor来说,上传附件是一个常见的需求。您可以按照以下步骤在wangeditor中实现上传附件功能:
1. 在HTML文件中引入wangeditor的js和css文件。
```html
<link rel="stylesheet" type="text/css" href="path/to/wangeditor.min.css">
<script type="text/javascript" src="path/to/wangeditor.min.js"></script>
```
2. 创建一个textarea作为编辑器的容器,并初始化wangeditor。
```html
<textarea id="editor"></textarea>
<script type="text/javascript">
var editor = new wangEditor('#editor');
editor.create();
</script>
```
3. 添加上传附件的配置项和自定义上传事件。
```html
<textarea id="editor"></textarea>
<script type="text/javascript">
var editor = new wangEditor('#editor');
// 配置上传图片的接口地址
editor.config.uploadImgServer = 'path/to/upload';
// 配置上传图片的额外参数(可选)
editor.config.uploadImgParams = {
token: 'your_token'
};
// 自定义上传事件
editor.config.uploadImgHooks = {
customInsert: function (insertImgFn, result) {
// result为上传成功后获取到的文件信息,包含url、alt等
var url = result.url;
var alt = result.alt;
// 插入图片到编辑器中
insertImgFn(url, alt);
}
};
editor.create();
</script>
```
在以上代码中,需要将`path/to/wangeditor.min.css`和`path/to/wangeditor.min.js`替换为实际的文件路径。同时,`path/to/upload`也需要替换为处理文件上传的后端接口地址。
通过以上步骤,您就可以在wangeditor中实现上传附件的功能了。
阅读全文