pluins 创建quill 目录
创建文件video.js
import { Quill } from 'vue-quill-editor' // 源码中是import直接倒入,这里要用Quill.import引入 const BlockEmbed = Quill.import('blots/block/embed') const Link = Quill.import('formats/link') const ATTRIBUTES = ['height', 'width'] class Video extends BlockEmbed { static create (value) { const node = super.create(value) // 添加video标签所需的属性 node.setAttribute('controls', 'controls') node.setAttribute('type', 'video/mp4') node.setAttribute('src', this.sanitize(value)) return node } static formats (domNode) { return ATTRIBUTES.reduce((formats, attribute) => { if (domNode.hasAttribute(attribute)) { formats[attribute] = domNode.getAttribute(attribute) } return formats }, {}) } static sanitize (url) { return Link.sanitize(url) // eslint-disable-line import/no-named-as-default-member } static value (domNode) { return domNode.getAttribute('src') } format (name, value) { if (ATTRIBUTES.indexOf(name) > -1) { if (value) { this.domNode.setAttribute(name, value) } else { this.domNode.removeAttribute(name) } } else { super.format(name, value) } } html () { const { video } = this.value() return `<a href="${video}">${video}</a>` } } Video.blotName = 'video' // 这里不用改,楼主不用iframe,直接替换掉原来,如果需要也可以保留原来的,这里用个新的blot Video.className = 'ql-video' Video.tagName = 'video' // 用video标签替换iframe export default Video
模版中引用注册
//import { quillEditor } from "vue-quill-editor"; //import { ImgHandlers, ToolbarOptions } from "../../api/upload"; // //这里引入修改过的video模块并注册 // import Video from '../../plugins/quill/video' // Quill.register(Video, true) // import Audio from '../../plugins/quill/audio' // Quill.register(Audio, true)
api/upload 配置
import { baseUrl } from './env' // 工具栏配置 const ToolbarOptions = [ ["bold", "italic", "underline", "strike"], // toggled buttons ["blockquote", "code-block"], // [{ header: 1 }, { header: 2 }], // custom button values [{ list: "ordered" }, { list: "bullet" }], // [{ script: "sub" }, { script: "super" }], // superscript/subscript [{ indent: "-1" }, { indent: "+1" }], // outdent/indent [{ direction: "rtl" }], // text direction [{ size: ["small", false, "large", "huge"] }], // custom dropdown [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ color: [] }, { background: [] }], // dropdown with defaults from theme [{ font: [] }], [{ align: [] }], ["link", "image","audio", "video"], // ["clean"] // remove formatting button ]; // 图片上传参数配置 const uploadConfig = { action: baseUrl + "/common/uploadImg", // 必填参数 图片上传地址 methods: "POST", // 必填参数 图片上传方式 //token: "229d6e933a679f40030d03f1e5c4a4ff", // 可选参数 如果需要token验证,假设你的token有存放在sessionStorage name: "file_name", // 必填参数 文件的参数名 size: 500, // 可选参数 图片大小,单位为Kb, 1M = 1024Kb accept: "image/png, image/gif, image/jpeg, image/bmp, image/x-icon" // 可选 可上传的图片格式 }; // handler重写事件, 任何工具按钮的功能都可以重写,这里只重写图片上传事件 const ImgHandlers = { image: function image() { var self = this; var fileInput = this.container.querySelector("input.ql-image[type=file]"); if (fileInput === null) { fileInput = document.createElement("input"); fileInput.setAttribute("type", "file"); // 设置图片参数名 if (uploadConfig.name) { fileInput.setAttribute("name", uploadConfig.name); } // 可设置上传图片的格式 fileInput.setAttribute("accept", uploadConfig.accept); fileInput.classList.add("ql-image"); // 监听选择文件 fileInput.addEventListener("change", function() { // 如果图片限制大小 if ( uploadConfig.size && fileInput.files[0].size >= uploadConfig.size * 1024 ) { fileInput.value = ""; return; } // 创建formData var formData = new FormData(); formData.append(uploadConfig.name, fileInput.files[0]); // 如果需要token且存在token if (uploadConfig.token) { formData.append("token", uploadConfig.token); } // 图片上传 var xhr = new XMLHttpRequest(); xhr.open(uploadConfig.methods, uploadConfig.action, true); // 上传数据成功,会触发 xhr.onload = function(e) { if (xhr.status === 200) { var res = JSON.parse(xhr.responseText); //console.log(res) let length = self.quill.getSelection(true).index; self.quill.insertEmbed(length, "image", res.data.url); self.quill.setSelection(length + 1); } fileInput.value = ""; }; // 开始上传数据 xhr.upload.onloadstart = function(e) { fileInput.value = ""; // console.log('开始上传') }; // 当发生网络异常的时候会触发,如果上传数据的过程还未结束 xhr.upload.onerror = function(e) {}; // 上传数据完成(成功或者失败)时会触发 xhr.upload.onloadend = function(e) { // console.log('上传结束') }; xhr.send(formData); }); this.container.appendChild(fileInput); } fileInput.click(); } }; export {uploadConfig,ImgHandlers,ToolbarOptions}
模版初始化
export default: components:{quillEditor} // computed: { // editor() { // return this.$refs.myQuillEditor.quill; // }, // editor2() { // return this.$refs.myQuillEditor2.quill; // }, // }, data return // editorOption: { // placeholder: "请输入文本信息...", // modules: { // toolbar: { // container: ToolbarOptions, // 工具栏 // handlers: ImgHandlers // } // } // }, methods: // //初始化编辑器 // onEditorReady(editor) { // //console.log(editor); // }, // onEditorReady2(editor2) {}, template: <div class="edit_container"> <quill-editor v-model="questionForm.questionOptions" ref="myQuillEditor2" class="editer" :options="editorOption" @ready="onEditorReady2($event)" ></quill-editor> </div>
webpack.base.conf.js
externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'element-ui': 'ELEMENT', // 'vue-quill-editor': 'VueQuillEditor', 'echarts': 'echarts', },
index.html
<!-- Include the Quill library --> <!-- <script src="//cdn.bootcss.com/quill/1.3.4/quill.js"></script> --> <!-- <script src="//cdn.jsdelivr.net/npm/vue"></script> --> <!-- Quill JS Vue --> <!-- <script src="//cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script> <script src="//cdn.jsdelivr.net/npm/quill-image-resize-module"></script> --> <!-- Include stylesheet --> <!-- <link href="//cdn.bootcss.com/quill/1.3.4/quill.core.css" rel="stylesheet"> <link href="//cdn.bootcss.com/quill/1.3.4/quill.snow.css" rel="stylesheet"> <link href="//cdn.bootcss.com/quill/1.3.4/quill.bubble.css" rel="stylesheet"> -->