1：下载富文本和更改图片大小

npm install quill-image-resize-module --save//更改img图片大小
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：在vue.config.js中配置

module.exports = {
configureWebpack: {
plugins: [new webpack.ProvidePlugin({"window.Quill": "quill/dist/quill.js",Quill: "quill/dist/quill.js",}),]
}
}

4.视频接入 video.js

import Quill from "quill";const BlockEmbed = Quill.import('blots/block/embed')
class VideoBlot extends BlockEmbed {static create (value) {let node = super.create()node.setAttribute('src', value.url)node.setAttribute('controls', value.controls)node.setAttribute('width', value.width)node.setAttribute('height', value.height)node.setAttribute('webkit-playsinline', true)node.setAttribute('playsinline', true)node.setAttribute('x5-playsinline', true)return node;}static value (node) {return {url: node.getAttribute('src'),controls: node.getAttribute('controls'),width: node.getAttribute('width'),height: node.getAttribute('height')};}
}
VideoBlot.blotName = 'video'
VideoBlot.tagName = 'video'
VideoBlot.className = 'ql-video'
export default VideoBlot;

5：在组件中编写

<template><div><!-- 图片上传组件辅助 --><el-upload :action="uploadImgUrl" ref="uploadFileImage" :data="imgCol" :before-upload="handleBeforeUpload":on-success="handleUploadSuccess" :on-error="uploadError" name="file" :show-file-list="false":headers="headers" style="display: none" /><!--视频上传组件辅助 --><el-upload :action="uploadImgUrl" ref="uploadFileVideo" :data="imgColVideo":before-upload="handleBeforeUploadVideo" :on-success="handleUploadSuccessVideo":on-error="handleUploadErrorVideo" name="file" :show-file-list="false" :headers="headers"style="display: none" /><!-- 富文本组件 --><!-- <quill-editor :id="randomString(3)" class="editor" v-model="content" :ref="toref" :options="editorOption"@blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor> --><quill-editor class="editor" v-model="content" ref="toref" :options="editorOption" @blur="onEditorBlur($event)"@focus="onEditorFocus($event)" @change="onEditorChange($event)" v-loading="quillUpdateImg" ></quill-editor></div>
</template><script>
import ImageResize from 'quill-image-resize-module'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Quill.register('modules/imageResize', ImageResize)
import { quillEditor } from 'vue-quill-editor'// 自定义字体大小
let Size = Quill.import('attributors/style/size')
Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px']
Quill.register(Size, true)// 自定义字体类型
var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif']
var Font = Quill.import('formats/font')
Font.whitelist = fonts // 将字体加入到白名单
Quill.register(Font, true)//视频标签插入（样式保持宽度100%）
import video from './video'
Quill.register(video, true)
export default {props: {/* 编辑器的内容 */value: {type: String},/* 图片大小 */maxSize: {type: Number,default: 4000 //kb},quillIndex: {type: Number,default: 0},toref: {type: String,default: "quillEditor"},},components: { quillEditor },data() {return {content: this.value,editorOption: {placeholder: '输入文本...',theme: 'snow', //主题modules: {imageResize: {   //添加图片拖拽上传，自定义大小（下面会详细介绍安装方法）displayStyles: {   //添加backgroundColor: 'black',border: 'none',color: 'white'},modules: ['Resize', 'DisplaySize', 'Toolbar']   //添加},toolbar: {container: [// [{ 'font':fonts }],['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线['blockquote', 'code-block'],     //引用，代码块[{ 'header': 1 }, { 'header': 2 }],        // 标题，键值对的形式；1、2表示字体大小[{ 'list': 'ordered' }, { 'list': 'bullet' }],     //列表[{ 'script': 'sub' }, { 'script': 'super' }],   // 上下标[{ 'indent': '-1' }, { 'indent': '+1' }],     // 缩进[{ 'direction': 'rtl' }],             // 文本方向// [{ 'size':Size }], // 字体大小，false设置自定义大小[{ 'header': [1, 2, 3, 4, 5, 6, false] }],     //几级标题[{ 'color': [] }, { 'background': [blur()] }],     // 字体颜色，字体背景颜色// [{ 'font': fonts }],     //字体[{ 'align': [] }],    //对齐方式['clean'],    //清除字体样式['image', 'video']    //上传图片、上传视频],handlers: {video: this.handelVideo,image: this.handelImage,}}}},quillUpdateImg:false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示imgCol: {//图片传递的参数},imgColVideo: {//视频传递的参数},uploadImgUrl: '', // 上传的图片服务器地址headers: {//登录成功后的token字段，没有可以不用传},};},watch: {value: function () {this.content = this.value;}},methods: {onEditorBlur() {//失去焦点事件},onEditorFocus() {//获得焦点事件},onEditorChange() {//内容改变事件this.$emit("input", this.content);},handelVideo() {//自定义上传视频事件this.uploadType = "video";this.$nextTick(() => {this.$refs.uploadFileVideo.$children[0].$refs.input.click();});},handelImage() {this.uploadType = "image";this.$nextTick(() => {this.$refs.uploadFileImage.$children[0].$refs.input.click();});},// 上传前校检格式和大小handleBeforeUpload(file) {this.quillUpdateImg = true// console.log(file)if (this.uploadType === "image") {let regArr = [".gif", ".jpg", ".jpeg", ".png"];let lastName = file.name.slice(file.name.indexOf("."));if (regArr.indexOf(lastName) == -1) {this.$message.error(`仅支持.gif/.jpg/.jpeg/.png格式!`);this.quillUpdateImg = falsereturn false;}}},handleUploadSuccess(res, file) {// // 获取富文本组件实例// debuggerlet quill = this.$refs.toref.quillconsole.log(quill)// console.log(this.fileList)console.log(quill.getSelection)// 如果上传成功myQuillEditorif (res.status == '0') {// 获取光标所在位置// let length = quill.getSelection().index;if (this.uploadType === "image") {// 获取光标所在位置let length = quill.getSelection().index;// 插入图片  res.info为服务器返回的图片地址quill.insertEmbed(length, 'image', res.data.fileUrl)// 调整光标到最后quill.setSelection(length + 1)}} else {this.$message.error("插入失败");}this.quillUpdateImg = false},uploadError() {if (this.uploadType != "image") {this.$message.error("图片插入失败!");}},// 上传前校检格式和大小handleBeforeUploadVideo(file) {this.quillUpdateImg = trueconsole.log(file)if (this.uploadType === "video") {let acceptType = ["mp4","avi","mpg","rmvb",];let isVideo = null;acceptType.some((d) => {if (file.type.includes(d)) {isVideo = true;}});if (!isVideo) {this.$message.error("上传视频只能是  mp4, avi, mpg, rmvb格式!");this.quillUpdateImg = falsereturn false;}return true;}},handleUploadSuccessVideo(res, file) {// console.log(res.data.fileUrl)// // 获取富文本组件实例let quill = this.$refs.toref.quill// 如果上传成功if (res.status == '0') {// 获取光标所在位置// let length = quill.getSelection().index;if (this.uploadType === "video") {let length = quill.getSelection().index;// 插入图片res.url为服务器返回的地址quill.insertEmbed(length, 'video', {url:res.data.fileUrl,controls: 'controls',width: '100%',height: 'auto'})}// // 调整光标到最后quill.setSelection(length + 1);this.$message.success(res.data.msg)} else {this.$message.error("插入失败");}this.quillUpdateImg = false},handleUploadErrorVideo() {if (this.uploadType != "video") {this.$message.error("视频插入失败!");}},}
};
</script><style></style>

6：在父组件中引入

<template><div><Editor v-model="输入地址" :quillIndex="2" toref="Editorc" placeholder="请输入内容"/></div>
</template>
<script>
import Editor from '@/components/index.vue'//引入组件内容并注册
export default {components: {Editor},data() {return {//输入实例}}}</script>

vue项目引入富文本编辑，图片上传/视频上传相关推荐

vue项目html引入css,vue项目引入自定义.css的样式文件
ES6的引入方式: .vue文件中 css文件引入 @import "../assets/common/common.css";//自定义.css的样式路径 js文件的引入在ma ...
VUE项目引入微信JSSDK 实现微信自定义分享
VUE项目引入微信JSSDK 实现自定义分享前端vue.后端php 问题:后端获取config参数所需的url 需要和请求自定义分享页面url一致一.微信公众号后台添加 js安全域名(白名单) 二 ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...
【Element-UI】Vue项目引入element-ui
安装element-ui需要一个创建好的vue项目并且安装好了node 创建vue项目步骤可以参考我发的上一篇:[Vue]创建项目 vue项目引入element-ui 1. 进入到项目所在路径 2. ...
vue项目引入CNZZ数据专家（方法汇总篇）
vue项目引入CNZZ数据专家(方法汇总篇) 很多网站都有cnzz数据统计,用于分析网站页面受访情况. 今天就来备注一下开发经验: vue如何集成cnzz数据专家进行受访记录? 友盟+CNZZ官方文档 ...
vue项目引入typescript（vue与ts混用）
说明为什么要在vue项目中使用ts? 新公司给了一个关于vue项目的需求,又由于ts是JavaScript的超集,强类型数据,组件化友好.故我选择在vue项目中引入ts. 下载typescript和 ...
随笔-vue项目引入axios
随笔-vue项目引入axios 本文参考链接: 一安装axios依赖 npm install axios 二引入axios 在main.js中引入,注意与很多第三方模块不同的是,axios不能使用 ...
vue项目引入不符合ES6模块化标准的JS文件
vue项目引入不符合ES6模块化标准的JS文件实现方式实现原理实现方式要引入的文件放在public目录下,在index.html中通过script标签引入实现原理参考vue官网–处理静态资 ...
Vue项目引入Echarts可视化图表库教程踩坑
Apache ECharts是一个基于 JavaScript 的开源可视化图表库,ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表. ...

vue项目引入富文本编辑，图片上传/视频上传

1：下载富文本和更改图片大小

2：在main.js中引入

3：在vue.config.js中配置

4.视频接入 video.js

5：在组件中编写

6：在父组件中引入

vue项目引入富文本编辑，图片上传/视频上传相关推荐

最新文章

热门文章