|
|
@@ -0,0 +1,329 @@
|
|
|
+<template>
|
|
|
+ <div class="editor">
|
|
|
+ <quill-editor class="ql-editor" v-model="content" ref="myQuillEditor" :options="editorOption" @change="onEditorChange($event)"></quill-editor>
|
|
|
+
|
|
|
+ <el-upload class="ivu-upload" :show-upload-list="false" :headers="headers" :on-success="handleSuccess" accept=".jpg, .jpeg, .png"
|
|
|
+ :max-size="2048" multiple action="/api-web/uploadFile">
|
|
|
+ <Button icon="ios-cloud-upload-outline"></Button>
|
|
|
+ </el-upload>
|
|
|
+
|
|
|
+ <el-dialog title="插入视频" width="500px" :visible.sync="dialogFormVisible">
|
|
|
+ <el-form :model="dialogForm" ref="diologForm" :rules="dialogFormRules">
|
|
|
+ <el-form-item label="封面图地址" label-width="90px">
|
|
|
+ <el-upload class="avatar-uploader" style="line-height: 0;display: inline-block" action="/api-web/uploadFile"
|
|
|
+ :headers="headers" :show-file-list="false" v-loading="uploadImgLoading" accept=".jpg, .jpeg, .png"
|
|
|
+ :on-success="handleImgSuccess" :on-error="handleUploadImgError" :before-upload="beforeImgUpload">
|
|
|
+ <img v-if="dialogForm.poster" :src="dialogForm.poster" class="avatar" />
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="视频类型" label-width="90px">
|
|
|
+ <el-radio-group v-model="formRadio">
|
|
|
+ <el-radio :label="1">外部链接</el-radio>
|
|
|
+ <el-radio :label="2">上传</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="formRadio == 1" label="视频地址" label-width="90px" prop="url">
|
|
|
+ <el-input v-model="dialogForm.url" style="width: 100%;" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="formRadio == 2" label="上传视频" label-width="90px" prop="videoUrl">
|
|
|
+ <el-upload class="upload-demo" style="display: inline-block" v-loading="uploadLoading" action="/api-web/uploadFile"
|
|
|
+ :before-upload="beforeUpload" :on-success="handleUploadSuccess" :on-error="handleUploadError"
|
|
|
+ :show-file-list="false" accept=".mp4" :file-list="fileList" :on-exceed="handleExceed">
|
|
|
+ <video style="width: 120px; height: 120px" v-if="dialogForm.videoUrl" type="video/mp4" preload="auto" :src="dialogForm.videoUrl"></video>
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </el-upload>
|
|
|
+ <p class="imageSize">只能上传mp4文件, 且不超过100M</p>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogFormVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="onVideoComfirm('diologForm')">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getToken
|
|
|
+ } from "@/utils/auth";
|
|
|
+ import "quill/dist/quill.core.css";
|
|
|
+ import "quill/dist/quill.snow.css";
|
|
|
+ import "quill/dist/quill.bubble.css";
|
|
|
+ import Quill from "quill";
|
|
|
+ import {
|
|
|
+ quillEditor
|
|
|
+ } from "vue-quill-editor";
|
|
|
+ // 工具栏配置
|
|
|
+ const toolbarOptions = [
|
|
|
+ ["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: ["small", false, "large", "huge"]
|
|
|
+ }], // 字体大小
|
|
|
+ [{
|
|
|
+ header: [1, 2, 3, 4, 5, 6, false]
|
|
|
+ }], // 标题
|
|
|
+ [{
|
|
|
+ color: []
|
|
|
+ }, {
|
|
|
+ background: []
|
|
|
+ }], // 字体颜色、字体背景颜色
|
|
|
+ [{
|
|
|
+ font: []
|
|
|
+ }], // 字体种类
|
|
|
+ [{
|
|
|
+ align: []
|
|
|
+ }], // 对齐方式
|
|
|
+ ["clean"], // 清除文本格式
|
|
|
+ ["image", "video"] // 链接、图片、视频
|
|
|
+ // ["link", "image", "video"] // 链接、图片、视频
|
|
|
+ ];
|
|
|
+ // 标题
|
|
|
+ const titleConfig = {
|
|
|
+ "ql-bold": "加粗",
|
|
|
+ "ql-color": "颜色",
|
|
|
+ "ql-font": "字体",
|
|
|
+ "ql-code": "插入代码",
|
|
|
+ "ql-italic": "斜体",
|
|
|
+ // 'ql-link': '添加链接',
|
|
|
+ "ql-background": "背景颜色",
|
|
|
+ "ql-size": "字体大小",
|
|
|
+ "ql-strike": "删除线",
|
|
|
+ "ql-script": "上标/下标",
|
|
|
+ "ql-underline": "下划线",
|
|
|
+ "ql-blockquote": "引用",
|
|
|
+ "ql-header": "标题",
|
|
|
+ "ql-indent": "缩进",
|
|
|
+ "ql-list": "列表",
|
|
|
+ "ql-align": "文本对齐",
|
|
|
+ "ql-direction": "文本方向",
|
|
|
+ "ql-code-block": "代码块",
|
|
|
+ "ql-formula": "公式",
|
|
|
+ "ql-image": "图片",
|
|
|
+ "ql-video": "视频",
|
|
|
+ "ql-clean": "清除字体样式",
|
|
|
+ "ql-upload": "文件"
|
|
|
+ };
|
|
|
+
|
|
|
+ // 这里引入修改过的video模块并注册
|
|
|
+ import Video from "@/views/quill/video.js";
|
|
|
+ import dayjs from 'dayjs'
|
|
|
+ Quill.register(Video, true);
|
|
|
+ export default {
|
|
|
+ name: 'editor',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ content: null,
|
|
|
+ headers: {
|
|
|
+ Authorization: getToken()
|
|
|
+ },
|
|
|
+ editorOption: {
|
|
|
+ placeholder: "请输入内容",
|
|
|
+ modules: {
|
|
|
+ toolbar: {
|
|
|
+ container: toolbarOptions,
|
|
|
+ handlers: {
|
|
|
+ image: function(value) {
|
|
|
+ if (value) {
|
|
|
+ // 调用iview图片上传
|
|
|
+ document.querySelector(".ivu-upload .el-upload").click();
|
|
|
+ } else {
|
|
|
+ this.quill.format("image", false);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ video: function(value) {
|
|
|
+ if (value) {
|
|
|
+ that.dialogFormVisible = true;
|
|
|
+ let editor = that.$refs.myQuillEditor.quill;
|
|
|
+ // 光标所在位置
|
|
|
+ that.editorIndex = editor.getSelection().index;
|
|
|
+ } else {
|
|
|
+ this.quill.format("image", false);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onEditorChange({
|
|
|
+ quill,
|
|
|
+ html,
|
|
|
+ text
|
|
|
+ }) {
|
|
|
+ this.form.content = html;
|
|
|
+ },
|
|
|
+ onVideoComfirm (formName) {
|
|
|
+ this.$refs[formName].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ let dialogForm = this.dialogForm;
|
|
|
+ // 获取富文本组件实例
|
|
|
+ let quill = this.editor;
|
|
|
+ // 插入图片，res为服务器返回的图片链接地址
|
|
|
+ const params = {
|
|
|
+ poster: dialogForm.poster,
|
|
|
+ url: this.formRadio == 1 ? dialogForm.url : dialogForm.videoUrl,
|
|
|
+ }
|
|
|
+ quill.insertEmbed(this.editorIndex, "video", params);
|
|
|
+ // 调整光标到最后
|
|
|
+ quill.setSelection(this.editorIndex + 1, { preload: false });
|
|
|
+
|
|
|
+ this.dialogFormVisible = false;
|
|
|
+ this.dialogForm = {
|
|
|
+ poster: null,
|
|
|
+ url: null,
|
|
|
+ videoUrl: null
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addQuillTitle () {
|
|
|
+ const oToolBar = document.querySelector(".ql-toolbar"),
|
|
|
+ aButton = oToolBar.querySelectorAll("button"),
|
|
|
+ aSelect = oToolBar.querySelectorAll("select");
|
|
|
+ aButton.forEach(function (item) {
|
|
|
+ if (item.className === "ql-script") {
|
|
|
+ item.value === "sub" ? (item.title = "下标") : (item.title = "上标");
|
|
|
+ } else if (item.className === "ql-indent") {
|
|
|
+ item.value === "+1"
|
|
|
+ ? (item.title = "向右缩进")
|
|
|
+ : (item.title = "向左缩进");
|
|
|
+ } else {
|
|
|
+ item.title = titleConfig[item.classList[0]];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ aSelect.forEach(function (item) {
|
|
|
+ item.parentNode.title = titleConfig[item.classList[0]];
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleUploadImgError(file) {
|
|
|
+ this.uploadImgLoading = false
|
|
|
+ this.$message.error('上传失败')
|
|
|
+ },
|
|
|
+ handleImgSuccess(res, file) {
|
|
|
+ this.uploadImgLoading = false
|
|
|
+ this.dialogForm.poster = res.data.url
|
|
|
+ },
|
|
|
+ beforeImgUpload(file) {
|
|
|
+ const imageType = {
|
|
|
+ "image/png": true,
|
|
|
+ "image/jpeg": true
|
|
|
+ };
|
|
|
+ const isImage = imageType[file.type];
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
+ console.log(isImage, isLt2M)
|
|
|
+ if (!isImage) {
|
|
|
+ this.$message.error("只能上传图片格式!");
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error("上传图片大小不能超过 2MB!");
|
|
|
+ }
|
|
|
+ if (isImage && isLt2M) {
|
|
|
+ this.uploadImgLoading = true
|
|
|
+ }
|
|
|
+ return isImage && isLt2M;
|
|
|
+ },
|
|
|
+ handleAvatarSuccess(res, file) {
|
|
|
+ this.form.coverImage = res.data.url;
|
|
|
+ },
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
+ const imageType = {
|
|
|
+ "image/png": true,
|
|
|
+ "image/jpeg": true
|
|
|
+ };
|
|
|
+ const isImage = imageType[file.type];
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
+
|
|
|
+ if (!isImage) {
|
|
|
+ this.$message.error("只能上传图片格式!");
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error("上传图片大小不能超过 2M!");
|
|
|
+ }
|
|
|
+ return isImage && isLt2M;
|
|
|
+ },
|
|
|
+ beforeUpload(file) {
|
|
|
+ // const isJPG = file.type === 'image/jpeg';
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 100;
|
|
|
+
|
|
|
+ // if (!isJPG) {
|
|
|
+ // this.$message.error('上传头像图片只能是 JPG 格式!');
|
|
|
+ // }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error('上传视频大小不能超过 100MB!');
|
|
|
+ }
|
|
|
+ this.uploadLoading = true
|
|
|
+ return isLt2M;
|
|
|
+ },
|
|
|
+ handleUploadError(file) {
|
|
|
+ this.uploadLoading = false
|
|
|
+ this.$message.error('上传视频失败')
|
|
|
+ },
|
|
|
+ handleUploadSuccess(file, fileList) {
|
|
|
+ this.uploadLoading = false
|
|
|
+ this.$message.success('上传视频成功')
|
|
|
+ this.dialogForm.videoUrl = file.data.url;
|
|
|
+ },
|
|
|
+ handleExceed(files, fileList) {
|
|
|
+ this.$message.error('您已上传过视频')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ editor() {
|
|
|
+ return this.$refs.myQuillEditor.quill;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ /deep/.ql-editor {
|
|
|
+ min-height: 300px;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.ql-container .ql-editor {
|
|
|
+ max-height: 500px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button--primary {
|
|
|
+ background: #14928a;
|
|
|
+ border-color: #14928a;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ &:hover,
|
|
|
+ &:active,
|
|
|
+ &:focus {
|
|
|
+ background: #14928a;
|
|
|
+ border-color: #14928a;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
