vue中使用富文本编辑器

最新推荐文章于 2024-08-06 15:16:55 发布

花城の

最新推荐文章于 2024-08-06 15:16:55 发布

阅读量3.2k

点赞数 3

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/CESATE/article/details/115953960

版权

vue 富文本编辑器 vue-quill-editor 图片上传工具栏

关键词由CSDN通过智能技术生成

vue中使用富文本编辑器

前端开发过程中，会遇到在页面上加入富文本编辑器，在vue项目中开发遇到这一需求的时候，我们可以使用富文本编辑器vue-quill-editor，话不多说，先上一张效果图：
在这里插入图片描述

1.安装 vue-quill-editor 依赖

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/dist/quill.bubble.css'
//注册全局
Vue.use(VueQuillEditor);

3.具体使用
html片段：

 <!-- 图片上传组件辅助-->
            <el-upload
            	class="avatar-uploader"
            	action="http://localhost:"//自定义的图片上传路径
            	name="file"
            	:show-file-list="false"
            	:on-success="uploadS