首页wangEditor上传图片

wangEditor上传图片

时间: 2023-12-01 18:38:39 浏览: 110

wangEditor是一款富文本编辑器，支持上传图片。具体操作步骤如下： 1. 在页面中引入wangEditor的js和css文件。 2. 创建一个div元素作为编辑器的容器。 3. 初始化编辑器，将容器作为参数传入。 4. 在编辑器中添加上传图片的功能。具体实现代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>wangEditor上传图片</title> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/wangeditor@4.6.16/dist/wangEditor.min.css"> </head> <body> <div id="editor"></div> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/wangeditor@4.6.16/dist/wangEditor.min.js"></script> <script type="text/javascript"> const editor = new wangEditor('#editor') editor.config.uploadImgServer = '/upload' // 上传图片的接口地址 editor.config.uploadFileName = 'file' // 上传图片的文件名 editor.config.uploadImgHeaders = { // 上传图片时需要携带的请求头 'Authorization': 'Bearer ' + token } editor.create() </script> </body> </html> ``` 其中，`/upload`是上传图片的接口地址，`file`是上传图片的文件名，`token`是需要携带的请求头中的token值。

阅读全文