基于vue的富⽂本编辑器（⼀）——vue-quill-editor的使⽤最近在看ant-design框架，发现⾥⾯⽤到了vue-quill-editor，是⼀个富⽂本编辑器。
基于 Quill，适⽤于Vue的富⽂本编辑器,⽀持服务端渲染和单页应⽤.不过有⼀定的兼容性，就是兼容IE10+
下⾯记录⼀下使⽤⽅法：
1.安装——npm
npm install vue-quill-editor -S
2.挂载到项⽬中
全局挂载——在main.js⽂件中添加以下内容
// main.js
import Vue from'vue'
import VueQuillEditor from'vue-quill-editor'
import'quill/ss'// import styles
import'quill/dist/quill.snow.css'// for snow theme
import'quill/dist/quill.bubble.css'// for bubble theme
Vue.use(VueQuillEditor,/* { default global options } */)
组件中挂载——在对应的组件中添加⼀下内容
import'quill/ss'
import'quill/dist/quill.snow.css'
import'quill/dist/quill.bubble.css'
import{ quillEditor }from'vue-quill-editor'
export default{
components:{
quillEditor
}
}
3.组件中使⽤quillEditor
<template>
<quill-editor
ref="myQuillEditor"
v-model="content"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
/>
</template>
4.在script中配置
import"quill/ss";
import"quill/dist/quill.snow.css";
import"quill/dist/quill.bubble.css";
import{ quillEditor }from"vue-quill-editor";
export default{
components:{
quillEditor
},
data(){
return{
// 富⽂本编辑器默认内容
content:'<h2>I am Example</h2>',
//富⽂本编辑器配置
editorOption:{
// Some
}
}
},
methods:{
//失去焦点事件
onEditorBlur(quill){
console.log('editor blur!', quill)
},
//获得焦点事件
onEditorFocus(quill){
console.log('editor focus!', quill)
},
// 准备富⽂本编辑器
onEditorReady(quill){
console.log('editor ready!', quill)
},
//内容改变事件
onEditorChange({ quill, html, text }){
console.log('editor change!', quill, html, text)
}
}
}
5.配置⼯具栏和事件重写
import Vue from'vue'
/
/富⽂本编辑图⽚上传配置
const uploadConfig ={
//action:'www.lumingtec/Businesss/servicexxx'
methods:'POST',//必填参数，图⽚上传⽅式
token:'',//可选参数，如果需要token验证，假设你的token存放在sessionStorage  name:'file',//必填参数，⽂件的参数名
size:700,//可选参数，图⽚⼤⼩，单位为kb,1M=1024kb
accept:'image/png,image/gif,image/jpeg,image/bmp,image/x-icon',//可选
type:'audio/mp4,video/mp4'
}
//toolbar⼯具栏的⼯具选项(默认展⽰全部)
const toolOptions =[
['bold','italic','underline','strike'],
['blockquote','code-block'],
[{header:1},{header: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:[]}],
[{font:[]}],
[{align:[]}],
['clean'],
['link','image','video']
]
function uploadFilePic(quill,files,index){
//创建formData
var formData =new FormData()
formData.append(uploadConfig.name,files[index])
//如果需要token且存在token
ken){
formData.append('token',ken)
}
Vue.axios.post('/api/File/Upload',formData).then(response=>{
console.log('upload response:',response);
let url = response.Path
let length = Selection().index
quill.insertEmbed(length,'image',url)
quill.setSelection(length+1)
index+=1
if(index<files.length){
uploadFilePic(quill,files,index)
}
})
}
const handlers ={
//配置上传图⽚
image:function image(){
var self =this
var fileInput =ainer.querySSelector('input.ql-image[type=file]') if(fileInput===null){
fileInput = ateElement('input')
fileInput.setAttribute('type','file')
//设置图⽚参数名
if(uploadConfig.name){
fileInput.setAttribute('name',uploadConfig.name)
}
//可设置上传图⽚的格式
fileInput.setAttribute('accept',uploadConfig.accept)
fileInput.setAttribute('multiple','multiple')
fileInput.classList.add('ql-image')
//监听选择⽂件
fileInput.addEventListener('change',function(){
if(fileInput.files.length===0){
return;
}
uploadFilePic(self.quill,fileInput.files,0)
})
}
fileInput.click();
},
//配置上传视频
video:function(){
var self =this
var fileInput =ainer.querySelector('input.ql-video[type=file]') if(fileInput===null){
fileInput = ateElement('input')
fileInput.setAttribute('type','file')
if(uploadConfig.name){
fileInput.setAttribute('name',uploadConfig.name)
}
fileInput.setAttribute('accept',pe)
fileInput.classList.add('ql-video')
fileInput.addEventListener('change',function(){
if(fileInput.files.length===0){
if(fileInput.files.length===0){
return;
}
var formData =new FormData()
formData.append(uploadConfig.name,fileInput.files[0])
ken){
formData.append('token',ken)
}
Vue.axios.post('/api/File/Upload',formData).then(response=>{    console.log('upload response:',response)
let url = response.Path
let length = Selection().index
self.quill.insertEmbed(length,'video',url);
})
})
}
asp富文本编辑器
fileInput.click()
}
}
export default{
placeholder:'',
theme:'snow',//主题
modules:{
toolbar:{
container:toolOptions,//⼯具栏选项
handlers:handlers,//事件重写
}
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。