Vue + Element UI 使用富文本编辑器

最新推荐文章于 2024-06-12 08:00:00 发布
最新推荐文章于 2024-06-12 08:00:00 发布
阅读量1.3k 收藏 6
点赞数 1
文章标签： vue.js ui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52310078/article/details/120910513
版权
本文详细介绍了如何在Vue项目中结合Element UI使用富文本编辑器，包括下载组件、引入、注册、放置及配置基本数据等六个步骤。
摘要由CSDN通过智能技术生成

第一步，先下载组件

npm install vue-quill-editor

第二步，在需要使用的位置引入（富文本组件）

import { quillEditor } from 'vue-quill-editor'

第三步，引入相关的css

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

第四步，注册组件（因为这个是组件，所以要先注册一下）

components: {
        quillEditor
    }

第五步，放到需要的盒子中

    <quill-editor
      ref="text"
      v-model="content"
      class="myQuillEditor"
      :options="editorOption"
    />
    <el-button type="primary" @click="submit">提交</el-button>
    <div v-html="data"></div>

第六步，配置基本数据


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  执笔画情书
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    6
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  1
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
VUE-element UI使用富文本

				
			

			

				

					躺赢啊
				

				

					01-08
					
					1万+
					
				

			

		

		

			
				
https://segmentfault.com/a/1190000015954237



			
		

	



                

              
                



	

		

			

				
					
elementui怎样添加富文本编辑器

				
			

			

				

					大连赵哥的博客
				

				

					03-30
					
					1672
					
				

			

		

		

			
				
elementui怎样添加富文本编辑器

			
		

	



                


  
              

                


	

		

			

				
					
详细讲解Element UI 中丰富的表单控件（图文解析）

					
最新发布

				
			

			

				

					码农研究僧的博客
				

				

					06-12
					
					2309
					
				

			

		

		

			
				
Element UI 创建各种表单控件，包括文本框、文本域、下拉框、单选框、复选框、日期控件、图片上传、文件上传和富文本控件

			
		

	





	

		

			

				
					
ElementUI生成富文本编辑器

				
			

			

				

					kepler星球的博客
				

				

					03-10
					
					7393
					
				

			

		

		

			
				
1.安装插件

npm install vue-quill-editor --save

                       安装成功后在package.json中查看





2.全局引入插件（main.js）

import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css'

import 'quill/dist/quill.snow.css'...

			
		

	



		

			
		



	

		

			

				
					
【第001篇】vue+element-ui中集成富文本编辑器(vue-quill-editor)

				
			

			

				

					嘉&年华的博客
				

				

					08-24
					
					7711
					
				

			

		

		

			
				
一、在项目中下载安装富文本编辑器
npm install vue-quill-editor --save

二、在项目中引入(我这里是在main.js中全局引用了)
// 引入富文本组件
import QuillEditor from 'vue-quill-editor'
// 引入富文本组件样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

			
		

	





	

		

			

				
					
VUE- elementUI使用quill富文本编辑器(编辑文本、上传图片)

				
			

			

				

					唯有热爱 可抵万难
				

				

					08-24
					
					339
					
				

			

		

		

			
				
准备工作：安装 yarn installvue-quill-editor

main.js

// 编辑器
import VueQuillEditor from 'vue-quill-editor'
// 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/...

			
		

	





	

		

			

				
					
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义

				
			

			

				

					10-16
				

			

		

		

			
				
在本文中，我们将深入探讨如何在Vue项目中集成Element UI和vue-quill-editor，创建一个功能丰富的富文本编辑器，并实现图片的自定义上传。Vue是一个轻量级、高效的前端框架，Element UI则是一个基于Vue的组件库，...

			
		

	





	

		

			

				
					
VUE.js+element-ui实现JSON编辑器

				
			

			

				

					07-24
				

			

		

		

			
				
在这个"VUE.js+element-ui实现JSON编辑器"项目中，开发者利用Vue.js的响应式数据绑定和组件化特性，结合Element-UI的组件库，创建了一个可以在网页上编辑JSON数据的工具。JSON（JavaScript Object Notation）是一种...

			
		

	





	

		

			

				
					
VUE+Element UI实现简单的表格行内编辑效果的示例的代码

				
			

			

				

					10-17
				

			

		

		

			
				
在本文中，我们将深入探讨如何使用Vue.js框架与Element UI库来实现一个具有行内编辑功能的简单表格。Element UI是基于Vue.js的组件库，提供了丰富的UI元素，包括表格（Table），使得开发者能够轻松创建出美观且功能...

			
		

	





	

		

			

				
					
一款基于vue3+typescript+element plus的HTML5富文本编辑器.zip

				
			

			

				

					02-13
				

			

		

		

			
				
标题中的“一款基于vue3+typescript+element plus的HTML5富文本编辑器”揭示了这个项目的核心技术栈，包括Vue.js的最新版本Vue 3、TypeScript以及Element Plus UI库。Vue 3是当前非常流行的前端框架，它提供了组件化...

			
		

	





	

		

			

				
					
element 富文本编辑器quill-editor使用记录

				
			

			

				

					qq_44647354的博客
				

				

					06-23
					
					3571
					
				

			

		

		

			
				
element富文本编辑器quill-editor使用

			
		

	





	

		

			

				
					
vue+element_ui中使用富文本编辑器

				
			

			

				

					qq_39572257的博客
				

				

					05-02
					
					1759
					
				

			

		

		

			
				
富文本编辑器中实现功能：基本文本格式、上传图片、上传视频、链接等。

安装富文本编辑器

cnpm install --save vue-quill-editor


引入富文本编辑器

import QuillEditor from 'vue-quill-editor'

Vue.use(QuillEditor)

注：可以放到main.js中全局引用，也可以放到对应页面中。

使用
自定义一个...

			
		

	





	

		

			

				
					
vue中使用elementUI+TinyMCE富文本编辑器实现一些常用编辑器功能、自定义图片上传、视频、生成文件链接

				
			

			

				

					熟悉JS拼写的FE
				

				

					09-20
					
					1282
					
				

			

		

		

			
				
普歌-码上鸿鹄团队:vue+elementUI+axios+TinyMCE富文本编辑器实现一些常用编辑器功能、自定义图片上传、视频、生成文件链接

前言:在进行描述性项目时，项目后台是避免不了使用富文本编辑器，市面上的富文本很多，大概有这些

wangEditor——基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费
TinyMCE——TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。
百度UEditor——UEditor是由百度web前端研发部开发所见即

			
		

	





	

		

			

				
					
vue+element-ui项目中 使用富文本编辑器

				
			

			

				

					weixin_45461674的博客
				

				

					09-16
					
					5252
					
				

			

		

		

			
				
vue+element-ui项目中 使用富文本编辑器
在项目中下载安装
npm install vue-quill-editor --save

在项目中引入(我这里是在main.js中全局引用了)
// 引入富文本组件
import QuillEditor from 'vue-quill-editor'
// 引入富文本组件样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/

			
		

	





	

		

			

				
					
vue+element+富文本编辑器

				
			

			

				

					mslmhl的博客
				

				

					05-02
					
					1万+
					
				

			

		

		

			
				
vue+element+富文本编辑器
全局使用
1.使用npm安装  vue-quill-editor
npm install vue-quill-editor --save

2.在main.js中引入富文本编辑器
//引用富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
 //引入富文本css
// require styles
impo...

			
		

	





	

		

			

				
					
element ui html编辑器,vue+element-ui 使用富文本编辑器

				
			

			

				

					weixin_32817047的博客
				

				

					06-23
					
					999
					
				

			

		

		

			
				
npm安装编辑器组件npm install vue-quill-editor –save在components文件夹创建ue.vue组件，如下ue.vue代码如下：export default {name: 'UE',data() {return {editor: null}},props: {defaultMsg: {type: String},config: {type: Object}},m...

			
		

	





	

		

			

				
					
vue3+js+elementPlus使用富文本编辑器@vueup/vue-quill

				
			

			

				

					weixin_43120901的博客
				

				

					07-04
					
					5615
					
				

			

		

		

			
				
vue3+vite+js+elementPlus中使用富文本编辑器，支持上传图片，采用img标签形式上传

			
		

	





	

		

			

				
					
VUE如何element-ui自带的富文本编辑器

					
热门推荐

				
			

			

				

					繁星、晚风
				

				

					04-18
					
					2万+
					
				

			

		

		

			
				
1、npm安装编辑器组件


npm install vue-quill-editor –save

2、完成以后在main.js引入


import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill...

			
		

	





	

		

			

				
					
vue3 + ts + vite + element-plus引入百度富文本编辑器

				
			

			

				

					weixin_47278755的博客
				

				

					08-23
					
					3620
					
				

			

		

		

			
				
vue3 ts百度编辑器

			
		

	





	

		

			

				
					
vue element ui 写一个富文本编辑器 加粗标红

				
			

			

				

					12-05
				

			

		

		

			
				
可以使用Vue和Element UI来实现一个富文本编辑器，同时也可以使用第三方库Quill来实现。以下是使用Element UI和Quill实现的代码示例：

使用Element UI：

1. 首先需要安装Element UI和Quill：

```
npm install element-ui quill --save
```

2. 在Vue组件中引入Element UI和Quill：

```javascript
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { Button, Input } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
```

3. 在Vue组件中使用Element UI和Quill：

```html
<template>
  <div>
    <el-button type="primary" @click="bold">加粗</el-button>
    <el-button type="primary" @click="red">标红</el-button>
    <quill-editor v-model="content" :options="editorOption"></quill-editor>
  </div>
</template>

<script>
export default {
  components: {
    quillEditor,
    'el-button': Button,
    'el-input': Input
  },
  data() {
    return {
      content: '',
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ 'header': 1 }, { 'header': 2 }],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],
            [{ 'indent': '-1' }, { 'indent': '+1' }],
            [{ 'direction': 'rtl' }],
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'font': [] }],
            [{ 'align': [] }],
            ['clean'],
            ['link', 'image', 'video']
          ]
        }
      }
    }
  },
  methods: {
    bold() {
      const quill = this.$refs.myQuillEditor.quill
      const range = quill.getSelection()
      if (range) {
        quill.format('bold', true)
      }
    },
    red() {
      const quill = this.$refs.myQuillEditor.quill
      const range = quill.getSelection()
      if (range) {
        quill.format('color', 'red')
      }
    }
  }
}
</script>
```

使用Quill：

1. 首先需要安装Quill：

```
npm install quill --save
```

2. 在Vue组件中引入Quill：

```javascript
import Quill from 'quill'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
```

3. 在Vue组件中使用Quill：

```html
<template>
  <div>
    <button @click="bold">加粗</button>
    <button @click="red">标红</button>
    <div ref="editor"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editor: null
    }
  },
  mounted() {
    this.editor = new Quill(this.$refs.editor, {
      modules: {
        toolbar: [
          ['bold', 'italic', 'underline', 'strike'],
          ['blockquote', 'code-block'],
          [{ 'header': 1 }, { 'header': 2 }],
          [{ 'list': 'ordered' }, { 'list': 'bullet' }],
          [{ 'script': 'sub' }, { 'script': 'super' }],
          [{ 'indent': '-1' }, { 'indent': '+1' }],
          [{ 'direction': 'rtl' }],
          [{ 'size': ['small', false, 'large', 'huge'] }],
          [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
          [{ 'color': [] }, { 'background': [] }],
          [{ 'font': [] }],
          [{ 'align': [] }],
          ['clean'],
          ['link', 'image', 'video']
        ]
      },
      theme: 'snow'
    })
  },
  methods: {
    bold() {
      const range = this.editor.getSelection()
      if (range) {
        this.editor.format('bold', true)
      }
    },
    red() {
      const range = this.editor.getSelection()
      if (range) {
        this.editor.format('color', 'red')
      }
    }
  }
}
</script>
```



			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值