vue-quill-editor富文本文件上传
时间: 2023-08-29 19:13:11 浏览: 63
Vue-Quill-Editor富文本编辑器可以实现文件上传功能。在Vue-Quill-Editor中,可以通过引入Element-ui的Upload组件来实现文件上传。你可以隐藏Upload组件并添加样式,然后在Quill-Editor的工具栏中添加一个按钮,将其点击事件与隐藏的Upload组件相关联。具体步骤如下:
1. 在Vue-Quill-Editor组件的模板中,隐藏Element-ui的Upload组件,并为其添加一个类名(例如:quill-file-uploader)。
2. 在Quill-Editor的工具栏配置(options)中,添加一个自定义的按钮,将其点击事件与隐藏的Upload组件相关联。点击事件中可以使用JavaScript代码来模拟点击隐藏的Upload组件的input元素。
3. 在点击事件中,你可以调用上传文件的逻辑,例如调用后台接口进行文件上传。
以上就是实现Vue-Quill-Editor富文本文件上传的方法,你可以根据自己的需求进行相应的调整和扩展。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue-quill-editor富文本编辑器的使用(实现图片/文件上传)](https://blog.csdn.net/weixin_40682842/article/details/110630443)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [Vue-Quill-Editor + Element 实现富文本自定义上传图片和视频](https://blog.csdn.net/yuxiangmitu/article/details/112670308)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)