- 下载
npm install vue-quill-editor
2.导入
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
3.使用
<!-- 富文本 -->
<div class="editor-wrapper">
<!-- 改进quill的图片base64功能，改为上传后拼接url，上传组件隐藏 -->
<el-upload
class="quill-upload"
:action="photoUploadUrl"
:show-file-list="false"
:on-success="handleQuillImgSuccess"
with-credentials
accept="image/gif, image/jpeg, image/jpg, image/bmp, image/png"
style="display: none">
<i id="imgInput" class="el-icon-plus avatar-uploader-icon" />
</el-upload>
<!-- -->
<quill-editor ref="myQuillEditor" v-model="form.CONTENT" @change="onEditorChange($event)" :disabled="contentModel" :options="editorOption" />
<span class="size-tip">
{{TiLength}}/500
</span>
</div>
4.赋值与方法
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: [] }],
['clean'], // remove formatting button
['image','video'],
]
data(){
return {
photoUploadUrl: `${window.__GW_ENV__.BASE_API}sys/sysFile/upload`, //图片上传URL
editorOption: {
placeholder: '请输入内容',
modules: {
toolbar: {
container: toolbarOptions,
handlers: {
// 重写点击组件上的图片按钮要执行的代码
'image': function (value) {
that.$nextTick(() => {
document.querySelector('.quill-upload .el-icon-upload').click()
})
}
}
}
}
},
form: {
CONTENT:'',
// scType: 'complex', //模式 简单-simple 复杂-complex
},
}
},
methods: {
//富文本字数监听
onEditorChange(event) {
event.quill.deleteText(500,1);
if(this.form.content===0){
this.TiLength = 0
}
else{
this.TiLength = event.quill.getLength()-1
}
},
drawerOpen() {
this.$refs.form && this.$refs.form.clearValidate()
this.initEditor()
if(this.currentData.id) {
this.form= {
TITLE:this.currentData.title,
REMIND: this.currentData.remind,
REMIND_TIME: this.currentData.remindTime,
FREQUENCY: this.currentData.frequency,
STOP: this.currentData.stop,
STOP_TIME: this.currentData.stopTime,
ATTACHMENT:this.currentData.attachment?JSON.parse(this.currentData.attachment):[],
CONTENT:this.currentData.content,
STATUS:this.currentData.status
// scType: 'complex', //模式 简单-simple 复杂-complex
},
this.form.ID = this.currentData.id
//附件
if (this.form.ATTACHMENT.length) {
this.form.ATTACHMENT.forEach((item) => {
this.fileList.push({
name: item.name,
url: `${window.__GW_ENV__.BPM_API}`+'sys/sysFile/download?fileId='+`${item.id}`,
})
})
}
}else {
delete this.form.ID
}
},
//抽屉回调——隐藏
beforeClose(done) {
this.clearFormValidate()
this.form = {
TITLE:"",
REMIND: 'true',
REMIND_TIME: '',
FREQUENCY: '1',
STOP: '0',
STOP_TIME: '',
ATTACHMENT:[],
CONTENT:'',
STATUS:'0',
},
this.fileList = []
if(typeof done =='function'){
done()
}else {
this.drawerVisible = false
}
},
// 初始化富文本编辑器，编辑回显以及光标定位
initEditor() {
this.$nextTick(() => {
//编辑时光标定位以及回显富文本的文字字数
if(this.currentData.id) {
this.TiLength = this.editor.getLength()-1
let range = this.editor.getSelection()
if(range) {
this.editor.setSelection(range.index + this.TiLength)
}
}
// console.log(range,'rage')
this.editor.getModule('toolbar').addHandler('image', this.imgHandler)
// 自定义粘贴图片功能
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
const formData = new FormData()
formData.append('file', file)
uploadFile(formData).then((res) => {
let range = this.editor.getSelection()
// let range = this.editor.selection.savedRange.index
if (range) {
// 在当前光标位置插入图片
this.editor.insertEmbed(range.index, 'image', `${window.__GW_ENV__.BASE_API}/sys/sysFile/download?fileId=${res.data}`)
// 将光标移动到图片后面
this.editor.setSelection(range.index + 1)
}
})
})
}
}, false)
})
},
// 点击quill-editor图片ICON触发事件
imgHandler(state) {
this.addRange = this.editor.getSelection()
if (state) {
// 选择并上传一张图片
const fileInput = document.getElementById('imgInput')
fileInput.click() // 加一个触发事件
}
},
// quill-editor的图片上传成功事件
handleQuillImgSuccess(response, file, fileList) {
// 图片的远程路径
const value = `${window.__GW_ENV__.BASE_API}sys/sysFile/download?fileId=${file.response.data}`
//https://oa-alpha.ecloud.work/oa-single/sys/sysFile/download?fileId=425406546158288897
// 将图片添加到富文本内容区域
this.addRange = this.editor.getSelection()
// 调用编辑器的 insertEmbed 方法，插入URL
this.editor.insertEmbed(
this.addRange !== null ? this.addRange.index : 0,
'image',
value
)
},
//清除表单验证
clearFormValidate() {
this.$refs.form && this.$refs.form.clearValidate()
},
//附件上传
handleImport({file}) {
const formData = new FormData();
formData.append('file', file);
uploadFile(formData)
.then((res) => {
if (res.code == 200 && res.isOk) {
console.log(this.form.ATTACHMENT)
this.form.ATTACHMENT.push({
id: res.data,
name: file.name,
uID: file.uid,
uName:this.$store.getters.name,
size: file.size,
date:new Date().format('yyyy-MM-dd HH:mm:ss')
})
this.$message({
message: '上传成功',
type: 'success',
});
}
})
.catch((error) => {
this.$message({
message: '上传失败',
type: 'error',
});
console.error(error);
});
},
//删除附件
handleFileRemove(file, fileList) {
if (file && file.status==="success") {
return this.$confirm(`确定移除 ${file.name}？`)
}
},
//查看上传附件
handleFilePreview(file) {
fileDownload(file.id, file.name)
}
}