基于vue-quill-editor组件自定义可以上传语音图片视频的富文本组件

最新推荐文章于 2024-06-19 18:12:07 发布
最新推荐文章于 2024-06-19 18:12:07 发布
阅读量870 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js 音视频 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pengpm/article/details/126972285
版权

1.安装依赖

npm install quill --save
npm install vue-quill-editor --save
npm install quill-image-resize-module --save

2.创建组件

<template>
    <div>
        <quill-editor
            v-model="content"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
            :style="styles"
        >
        </quill-editor>
        <el-upload
            class="upload-demo"
            :action="uploadUrl"
            :before-upload="handleBeforeUpload"
            :on-error="handleUploadError"
            :on-success="handleUploadSuccess"
            :headers="headers"
            style="display: none"
            ref="upload"
        >
            <el-button id="uploadInput" type="primary">点击上传</el-button>
        </el-upload>
    </div>
</template>
<script>
import { quillEditor, Quill } from "vue-quill-editor";

import "quill/dist/quill.core.css";

import "quill/dist/quill.snow.css";

import "quill/dist/quill.bubble.css";
import imageResize from "quill-image-resize-module"; //引入图片编辑组件
Quill.register("modules/imageResize", imageResize);

import { getToken } from "@/utils/auth";
export default {
    name: "Editor",
    props: {
        /* 编辑器的内容 */
        value: {
            type: String,
            default: "",
        },
        /* 高度 */
        height: {
            type: Number,
            default: 350,
        },
        /* 最小高度 */
        minHeight: {
            type: Number,
            default: null,
        },
        /* 只读 */
        readOnly: {
            type: Boolean,
            default: false,
        },
        // 上传文件大小限制(MB)
        fileSize: {
            type: Number,
            default: 5,
        },
        /* 类型（base64格式、url格式） */
        type: {
            type: String,
            default: "url",
        },
    },
    computed: {
        styles() {
            let style = {};
            if (this.minHeight) {
                style.minHeight = `${this.minHeight}px`;
            }
            if (this.height) {
                style.height = `${this.height}px`;
            }
            return style;
        },
    },
    watch: {
        value: {
            handler(val) {
                if (val !== this.currentValue) {
                    this.currentValue = val === null ? "" : val;
                    if (this.Quill) {
                        this.Quill.pasteHTML(this.currentValue);
                    }
                }
            },
            immediate: true,
        },
    },
    data() {
        return {
            uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
            headers: {
                Authorization: "Bearer " + getToken(),
            },
            content: "",
            editorOption: {
                modules: {
                    //其他配置，如quill-image-extend-module
                    toolbar: {
                        container: [
                            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
                            ["blockquote", "code-block"], // 引用  代码块
                            [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
                            [{ indent: "-1" }, { indent: "+1" }], // 缩进
                            [{ size: ["small", false, "large", "huge"] }], // 字体大小
                            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                            [{ align: [] }], // 对齐方式
                            ["clean"], // 清除文本格式
                            ["link", "image", "video"],
                            ["voice"], //新添加的工具
                        ],
                        handlers: {
                            voice: function (value) {
                                //添加工具方法，即点击时模仿点击上传组件的按钮
                                this.uploadType = "audio";
                                document.getElementById("uploadInput").click();
                            },
                        },
                    },
                    imageResize: {
                        //控制图片编辑的，实现功能就是这一段代码
                        displayStyles: {
                            backgroundColor: "black",
                            border: "none",
                            color: "white",
                        },
                        modules: ["Resize", "DisplaySize", "Toolbar"],
                    },
                },
                initVoiceButton: function () {
                    //初始化"voice"按钮样式
                    const voiceButton = document.querySelector(".ql-voice"); //"ql-" 是插件自动加的前缀

                    // 当然，可以直接手写样式，如：
                    // voiceButton.style.cssText =
                    //     "width:10px;font-weight:400";
                    // voiceButton.innerText = "上传音频";
                    voiceButton.innerHTML = "<i id='microphone' class='el-icon-microphone'></i>"
                    const elIconMicrophone = document.querySelector("#microphone")
                    elIconMicrophone.style.cssText = "color:#444444;font-size:16px;font-weight:800"  // 麦克风图标样式
                },
            },
            addRange: [],
            uploadData: {},
            photoUrl: "",
            uploadType: "",
        };
    },
    components: {
        quillEditor,
    },
    methods: {
        onEditorBlur() {
            //失去焦点事件
        },
        onEditorFocus() {
            //获得焦点事件
        },
        onEditorChange() {
            //内容改变事件
            this.$emit("input", this.content);
        },
        // 上传前校检格式和大小
        handleBeforeUpload(file) {
            // console.log("before")
            // 校检文件大小
            if (this.fileSize) {
                console.log("before");
                const isLt = file.size / 1024 / 1024 < this.fileSize;
                if (!isLt) {
                    this.$message.error(
                        `上传文件大小不能超过 ${this.fileSize} MB!`
                    );
                    return false;
                }
                const fileSuffix = file.name.substring(
                    file.name.lastIndexOf(".") + 1
                );
                let tempwhiteList = [];
                if (this.uploadType == "image") {
                    tempwhiteList = ["jpg", "jpeg", "png"];
                } else if (this.uploadType == "video") {
                    tempwhiteList = ["avi", "wmv", "mpeg", "mp4", "mov"];
                } else if (this.uploadType == "voice") {
                    tempwhiteList = ["mp3", "wma", "acc"];
                }
                // console.log(whiteList);
                const whiteList = tempwhiteList;
                if (whiteList.indexOf(fileSuffix) === -1) {
                    let errmsg = "";
                    whiteList.forEach((item, index) => {
                        errmsg += item + " ";
                    });
                    this.$message.error("只能是" + errmsg + "格式");
                    return false;
                }
            }

            return true;
        },
        handleUploadSuccess(e, file, fileList) {
            if (e.code == 200) {
                // console.log(this.uploadType);
                if (
                    this.uploadType == "image" ||
                    this.uploadType == "video" ||
                    this.uploadType == "link"
                ) {
                    let quill = this.$refs.myQuillEditor.quill;
                    let length = quill.getSelection().index; // 获取光标所在位置
                    let vm = this;
                    let url = e.url;
                    console.log("url", url);
                    if (url != null && url.length > 0) {
                        // 将文件上传后的URL地址插入到编辑器文本中
                        let value = url;
                        // API: https://segmentfault.com/q/1010000008951906
                        // this.$refs.myTextEditor.quillEditor.getSelection();
                        // 获取光标位置对象，里面有两个属性，一个是index 还有 一个length，这里要用range.index，即当前光标之前的内容长度，然后再利用 insertEmbed(length, 'image', imageUrl)，插入图片即可。
                        vm.addRange =
                            vm.$refs.myQuillEditor.quill.getSelection();
                        value =
                            value.indexOf("http") !== -1
                                ? value
                                : "http:" + value;
                        vm.$refs.myQuillEditor.quill.insertEmbed(
                            vm.addRange !== null ? vm.addRange.index : 0,
                            vm.uploadType,
                            value
                        ); // 调用编辑器的 insertEmbed 方法，插入URL
                    } else {
                        this.$message.error(`${vm.uploadType}插入失败`);
                    }
                    this.$refs["upload"].clearFiles(); // 插入成功后清除input的内容
                    quill.setSelection(length + 1); //光标位置向后移动一位
                } else {
                    let quill = this.$refs.myQuillEditor.quill;
                    let length = quill.getSelection().index; // 获取光标所在位置

                    let BlockEmbed = Quill.import("blots/block/embed");
                    class AudioBlot extends BlockEmbed {
                        static create(value) {
                            let node = super.create();
                            node.setAttribute("src", e); //设置audio的src属性
                            node.setAttribute("controls", true); //设置audio的controls，否则他将不会显示
                            node.setAttribute("controlsList", "nodownload"); //设置audio的下载功能为不能下载
                            node.setAttribute("id", "voice"); //设置一个id
                            return node;
                        }
                    }
                    AudioBlot.blotName = "audio";
                    AudioBlot.tagName = "audio"; //自定义的标签为audio
                    Quill.register(AudioBlot);

                    // insertEmbed(index: Number(插入的位置), type: String(标签类型), value: any(参数，将传入到create的方法中去), source: String = 'api')
                    quill.insertEmbed(length, "audio", e, "api");
                    quill.setSelection(length + 1); //光标位置向后移动一位
                }
            } else if (e.code == 500) {
                this.$message.error(e.msg);
            } else {
                this.$message.error(`${this.uploadType}插入失败`);
            }
        },
        imgHandler(state) {
            this.addRange = this.$refs.myQuillEditor.quill.getSelection();
            if (state) {
                let fileInput = document.getElementById("uploadInput");
                fileInput.click(); // 加一个触发事件
            }
            this.uploadType = "image";
        },
        videoHandler(state) {
            this.addRange = this.$refs.myQuillEditor.quill.getSelection();
            if (state) {
                let fileInput = document.getElementById("uploadInput");
                fileInput.click(); // 加一个触发事件
            }
            this.uploadType = "video";
        },
        voiceHandler(state) {
            this.addRange = this.$refs.myQuillEditor.quill.getSelection();
            if (state) {
                let fileInput = document.getElementById("uploadInput");
                fileInput.click(); // 加一个触发事件
            }
            this.uploadType = "voice";
        },
        handleUploadError() {
            this.$message.error("插入失败");
        },
        // 截屏粘贴到富文本框
        // pastePic() {
        //     // 页面加载之后就监听粘贴事件paste
        //     this.editor.root.addEventListener(
        //         "paste",
        //         (evt) => {
        //             if (
        //                 evt.clipboardData &&
        //                 evt.clipboardData.files &&
        //                 evt.clipboardData.files.length
        //             ) {
        //                 evt.preventDefault();
        //                 [].forEach.call(evt.clipboardData.files, (file) => {
        //                     if (
        //                         !file.type.match(
        //                             /^image\/(gif|jpe?g|a?png|bmp)/i
        //                         )
        //                     ) {
        //                         return;
        //                     }
        //                     this.handleUpload(file);
        //                 });
        //             }
        //         },
        //         false
        //     );
        // },
    },
    mounted() {
        this.editorOption.initVoiceButton();
        this.$refs.myQuillEditor.quill
            .getModule("toolbar")
            .addHandler("voice", this.voiceHandler);
        this.$refs.myQuillEditor.quill
            .getModule("toolbar")
            .addHandler("image", this.imgHandler);
        this.$refs.myQuillEditor.quill
            .getModule("toolbar")
            .addHandler("video", this.videoHandler);
        // this.pastePic();
    },
};
</script>
<style lang="scss" scoped>
.editor {
    position: relative;
    .ql-toolbar {
        border: 1px solid #cdcfd4;
        height: 40px;
        background: #f0f2f5;
    }
    .ql-editor {
        min-height: 240px;
        padding: 0;
        padding-top: 15px;
        box-sizing: border-box;
    }
    .ql-container {
        img {
            display: block;
        }
    }
    .wordNumber {
        position: absolute;
        right: 13px;
        bottom: 15px;
        color: #666666;
        font-size: 14px;
    }
    // .microphone-style{
    //     color: red;
    //     background: red;
    // }
}
</style>

3. 引入组件

import Editor from '@/components/Editor'

export default {
    components:{
        Editor
    },
}

4.使用

可用属性可从组件的prop中查看

<editor class="edt-content" v-model="addParams.content"/>
明明在干嘛
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2使用wangEditor开发富文本编辑器
qq_68134590的博客
05-17 1198
vue2使用wangEditor简单开发一个富文本编辑器
基于Recorder.js+vue+cube-ui开发的录音、图片+照相、表情（手机端）html5
qq_36031425的博客
09-16 925
最近公司要用网页开发手机端。看了下前端框架，考虑更新问题，选择了cube-ui+vue，总体感觉还不错。 总体的开发最大的问题就是发表评论要发语音、表情、图片（支持照相），网上找了一些，零零散散的，这里我把它 们整理一起，废话不说了，就上几张图吧。 表情使用的是Emoji表情，如果你是win7的话可能显示不了。语音基于vue-audio-recorder，只是加了长按录音，样式也改了一下。 图片...
若依RuoYi-Vue分离版—富文本Quill的图片支持伸缩大小及布局
最新发布
qq_20236937的博客
06-19 868
若依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中使用富文本插件wangEditor自定义本地视频和图片上传功能
MISS_zhang_0110的博客
06-10 5132
vue中使用富文本插件wangEditor自定义本地视频和图片上传功能
Annotator Pro - 自定义样式的图片标注 图片热点 图片注释插件
ICode联盟
12-16 334
下载地址为您的照片添加简单的注释,提示工具和图像缩放。附带了一个功能齐全的编辑器,您可以使用自定义插件。获得即时预览和调整设置,直到它是你想要的。针形、矩形、斑点,可见和不可见的各种样式随意拖拽摆放。使用方法引用样式文件 引用jquery库和js文件 调用$("#the-img-tag").annotatorPro({ annotations : [ { style : 12, popup_width : "100", title : "", text : "测试", id : "my-annotatio
[转]Vue Quill富文本自定义上传音频/视频
Admans的专栏
09-01 414
原文：https://blog.csdn.net/wangmj518/article/details/127247988。中把Editor/index.vue复制出来，一顿改改改~也不知道看了多少人的笔记。版权声明：本文为作者原创文章，转载请附上博文链接！作者：wangmj518。有时候项目中可能需要在。中上传音频，所以...封了方便以后使用😊。
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
10-16
在本文中，我们将深入探讨如何在Vue项目中集成Element UI和vue-quill-editor，创建一个功能丰富的富文本编辑器，并实现图片的自定义上传。Vue是一个轻量级、高效的前端框架，Element UI则是一个基于Vue的组件库，...
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
10-15
主要介绍了Vue项目中使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以...
vue3.0 vue-quill-editor.rar
09-19
Vue-Quill-Editor是一款基于Quill的 Vue.js 富文本编辑器组件，提供了丰富的文本格式化选项，如字体、字号、颜色、列表等，同时支持图片和视频的插入。在Vue3.0环境下使用Vue-Quill-Editor，需要确保组件与新版本的...
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
11-19
在使用Vue.js开发Web应用时，常常会遇到需要集成富文本编辑器的需求，Vue-quill-editor是一个非常流行的轻量级富文本编辑器组件，它基于Quill库进行封装，提供了丰富的功能和良好的用户体验。然而，在实际项目中，...
vue富文本编辑器 vue-quill-editor.js quill版本1.3.6
07-01
vue富文本编辑器vue-quill-editor.js ...vue-quill-editor富文本编辑器使用方法，最全，含部分源码解读，含图片上传，如果页面有多个富文本，图片上传解决方案 https://blog.csdn.net/cplvfx/article/details/125557966
vue quill editor 使用富文本添加上传音频功能
10-15
vue-quill-editor 是vue项目中常用的富文本插件，其功能能满足大部分的项目需求。这篇文章主要介绍了vue-quill-editor 富文本添加上传音频功能,需要的朋友可以参考下
在vue中使用quill-editor富文本编辑器（自定义工具栏、重写上传文件功能、工具栏中增加额外的功能按钮）
qq_40652539的博客
03-15 5645
下面对quill-editor的使用包含了自定义工具栏、重写工具栏中的上传文件功能、在工具栏中新增额外的功能按钮 进入我们的项目文件夹，并打开命令行窗口，然后进行下面的步骤： 1、安装vue-quill-editor 输入命令：npm install vue-quill-editor --save 2、引入插件 在项目的入口文件main.js中引入插件，如下： import VueQuillE...
基于vue3的iview实现quill-editor结合upload组件实现图片上传
zhouyonggo的专栏
03-14 879
基于vue3的iview实现quill-editor结合upload组件实现图片上传
vue 中quill-editor富文本图片和视频上传功能
qq_35946021的博客
04-13 1524
quill-editor富文本对于新手来说是个很友好的富文本编辑器。但是里面的图片上传和视频上传功能在实际的工作中不能满足要求。1.原生的图片上传会转换成bas64格式，2.视频上传只是个输入框，要有视频链接了才能添加视频；而且视频标签是iframe标签，并不是video标签。现在主要解决以上这两个问题加了个自定义上传视频弹出框，既可以用已经有的在线视频地址，也可以上传本地视频。
vue3使用vue-quill，并使用＜el-upload＞进行上传图片
Json大概可以put万物
11-10 1218
vue2升级vue3时,原版quill支持并不好，所以选择了支持更好的vue-quill
vue-quill-editor 富文本编辑器上传视频
热门推荐
且听风吟的博客
07-05 1万+
vue-quill-editor 富文本编辑器上传视频
vue项目引入富文本编辑，图片上传/视频上传
snowflak的博客
12-06 1840
vue项目引入富文本编辑，图片上传/视频上传
Tinymce富文本编辑器在vue项目中的使用；引入第三方插件和上传视频、图片等
weixin_39311719的博客
04-13 4030
在项目中的public文件夹中新建tinymce文件夹（因为我的项目是脚手架创建的，所以公共文件夹是public）；1. 最后两行是另外下载的插件（数学公式、导入word）,上面的二和三步的tinymce文件夹里面新建plugins文件夹，下载的两个插件就丢这里面;方法是在文件后面的方法中定义的，目的是验证上传的视频是否符合，验证通过定义了一个全局的遮罩loading，再调用定义的。：因为tinymce是英文版本的，所以要下载汉化包中文js，放到上面的tinymce文件夹中。1. 编辑器初始化中的“
vue-quill-editor配合elementui上传组件自定义图片上传操作
05-18
要实现vue-quill-editor配合elementui上传组件自定义图片上传操作，可以使用以下步骤： 1. 在vue-quill-editor中配置图片上传的方法： ``` <quill-editor v-model="content" ref="myQuillEditor" :options=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值