富文本编辑器上传不了微信文件夹的图片，使用vue-quill-editor编辑器

已于 2022-09-27 12:08:49 修改
阅读量269 收藏
点赞数
分类专栏： 若依 文章标签： vue.js 编辑器 javascript
于 2022-09-27 12:06:07 首次发布
原文链接：https://www.cnblogs.com/zjxiang008/p/12581952.html
版权

vue项目中，npm安装

 

npm install vue-quill-editor --save 在main.js注册 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor)
 

还需要安装element-ui
 

 

npm i element-ui -S 在main.js注册 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
 

创建一个Editor.vue组件
 文件在博客文件，Editor.zip
 

 

 

 

 

 

 

在父组件使用
 


                

        

        

    

  


    

      

        

            

              
                
                  wangmj518
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
vue问题四：富文本编辑器上传图片

				
			

			

				

					diji8584的博客
				

				

					10-23
					
					761
					
				

			

		

		

			
				
vue使用富文本编辑器上传图片：
我是用的是wangEditor 富文本编辑器 demo:http://www.wangeditor.com/
1).安装依赖:npm install wangeditor
2).我自己是创建了一个组件这样再用到的时候可以直接调用（可能有更简单的方法）


<template lang="html">

  <div cl...

			
		

	



                

              
                



	

		

			

				
					
android仿微信图片编辑器,electron/vue可编辑框contenteditable|仿微信截图

				
			

			

				

					weixin_30350469的博客
				

				

					05-26
					
					951
					
				

			

		

		

			
				
基于Electron+vue实现div可编辑contenteditable插入表情|electron-vue截图功能为了避免使用 vue 手动建立起 electron 应用程序。electron-vue 充分利用 vue-cli 作为脚手架工具，加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder，以及一些最常用的插件，如v...

			
		

	



                


  
              

                


	

		

			

				
					
vue-quill-editor：富文本编辑器使用

				
			

			

				

					qq_42931285的博客
				

				

					03-06
					
					1409
					
				

			

		

		

			
				
富文本编辑器如下所示，比如在微信公众号写文章时会看到。

富文本编辑器就是一个超级textarea,包含大量功能，类似word工具。
文章介绍的是一个富文本编辑器UI组件库vue-quill-editor。
vue-quill-editor依赖于quill插件。
使用如下：

安装

npm install vue-quill-editor

引入quill模块的样式

// require styles
import ‘quill/dist/quill.core.css’
import ‘quill/di

			
		

	





	

		

			

				
					
微信小程序富文本编辑器：从wangEditor到vue-quill-editor的迁移实战

				
			

			

				

					
				

			

		

		

			
				
作者最初尝试使用wangEditor，但由于在移动端无法正常上传本地图片，转而采用vue-quill-editor，这是一款功能强大且易于二次开发的富文本编辑器。文中提到了结合七牛云存储、Element UI以及vue-quill-editor实现图片...

			
		

	



		

			
		



	

		

			

				
					
Vue + vue-quill-editor（图片上传+禁止粘贴图片）

				
			

			

				

					Xiaoxiao_Zheng的博客
				

				

					07-08
					
					3606
					
				

			

		

		

			
				
Vue + vue-quill-editor基本配置使用封装组件优化使用1前提解决优化使用2场景解决
基本配置使用
封装组件
1 公共组件
<template>
  <quill-editor class='quill-editor' v-model="content" :options="editorOption" ref="myQuillEditor"></quill-editor>
</template>
<script>
// 富文本编辑器

			
		

	





	

		

			

				
					
【quill-editor】富文本编辑器对图片的放大缩小拖拽的实现

				
			

			

				

					m0_63834711的博客
				

				

					11-25
					
					1793
					
				

			

		

		

			
				
首先哈，quill-editor没有对图片的功能，文档里也有提到扩展模版文档

			
		

	





	

		

			

				
					
quill 富文本编辑器 @提及（仿微信）【处理粘贴，光标异常等问题】

				
			

			

				

					bigdargon的博客
				

				

					05-20
					
					410
					
				

			

		

		

			
				
quill 富文本编辑器 @提及（仿微信）【处理粘贴，光标异常等问题】

			
		

	





	

		

			

				
					
vue-quill-editor富文本上传

				
			

			

				

					08-25
				

			

		

		

			
				
使用vue-quill-editor富文本编辑器进行文件上传的方法是通过重写默认的上传事件，使用element的上传组件来触发文件上传，并将上传后的文件信息存储在云端。然后，将云端的文件地址赋值给quill-editor并传递给后端。 ...

			
		

	





	

		

			

				
					
vue如何安装使用Quill富文本编辑器

				
			

			

				

					10-17
				

			

		

		

			
				
主要为大家详细介绍了vue如何安装使用Quill富文本编辑器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
关于vue-quill-editor基于vue2.x项目中如何实现用户@功能（仿微信）

				
			

			

				

					MostDish_girl的博客
				

				

					06-27
					
					1100
					
				

			

		

		

			
				
vue-quill-editor实现用户@功能及变色

			
		

	





	

		

			

				
					
quill富文本编辑器处理复制图像的解决方法

				
			

			

				

					jansonKOU的博客
				

				

					10-26
					
					1842
					
				

			

		

		

			
				
quill编辑器对粘贴doc文档中图片的上传处理及单独粘贴图片时的上传处理

			
		

	





	

		

			

				
					
若依富文本添加字体 Editor 若依 vue Quill插件富文本框，文字大小设置，添加字体 对齐方式

				
			

			

				

					weixin_50885665的博客
				

				

					03-06
					
					1884
					
				

			

		

		

			
				
ruoyi-ui/src/components/Editor/index.vue · 若依/RuoYi-Vue - Gitee.com若依 vue Quill插件富文本框，文字大小设置，后台生效，手机端不生效问题-CSDN博客 富文本代码:


详情页:

			
		

	





	

		

			

				
					
【若依】 若依内置富文本框quill，editor居中无效

				
			

			

				

					amoureux555的博客
				

				

					02-23
					
					2441
					
				

			

		

		

			
				
若依内置富文本框quill，editor居中无效

			
		

	





	

		

			

				
					
若依 vue Quill插件富文本框，文字大小设置，后台生效，手机端不生效问题

				
			

			

				

					hexu_blog的博客
				

				

					12-03
					
					4769
					
				

			

		

		

			
				
原因，后台设置的样式，并没有加载到手机端而已，未设置情况下，查看Html  class="large-xx-xx"设置后台之后： style="font-size:64px";如下是我们需要得到的文字大小和字体的效果:自定义字体、文字大小JS部分：


自定义字体、文字大小css部分


组件完整代码（含element上传组件功能）：

			
		

	





	

		

			

				
					
若依前端富文本Quill添加更改图片大小

				
			

			

				

					akin__的博客
				

				

					11-17
					
					1958
					
				

			

		

		

			
				
若依前端富文本Quill添加更改图片大小

			
		

	





	

		

			

				
					
若依RuoYi-Vue分离版—富文本Quill的图片支持伸缩大小及布局

					
最新发布

				
			

			

				

					qq_20236937的博客
				

				

					06-19
					
					1353
					
				

			

		

		

			
				
若依RuoYi-Vue分离版—富文本Quill的图片支持伸缩大小及布局、工具栏带中文提示Quill的图片相关1.在vue.config.js 文件中添加 一下内容2.下载安装插件3.引入插件
Quill的图片相关
1.在vue.config.js 文件中添加 一下内容
const webpack = require('webpack');


new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        

			
		

	





	

		

			

				
					
vue中使用vue-quill-editor并且粘贴直接上传图片

				
			

			

				

					chelly_z的博客
				

				

					11-02
					
					1307
					
				

			

		

		

			
				
vue-quill-editor富文本，粘贴图片时默认都是base64格式，比较大，所以就需要传到服务器中

			
		

	





	

		

			

				
					
Vue-quill-editor与plupload富文本插件实战：图片上传与权限管理

				
			

			

				

					
				

			

		

		

			
				
这个示例展示了如何在Vue中使用vue-quill-editor和plupload配合，实现富文本编辑器与图片上传的功能。需要注意的是，实际开发中，你还需要根据具体需求调整代码，例如处理用户输入、错误处理、上传进度显示等。此外...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值