vue quill使用&quill 自定义图片上传&自定义mp4 更换标签
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"> -->
