1.安装
npm install vue-quill-editor
2.引入到项目中
有两种挂载方式: 全局挂载 和 在组件中挂载,根据自己的项目需求选择,一般用到富文本编辑都是在某一个项目中,这里只写在项目中挂载的方式
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
components: {
quillEditor
}
}
3.在页面上写组件
<el-upload v-show="false" id="quill-upload" ref="annexUpload" action="上传的路径" name="content" :limit="1" list-type="picture" :on-exceed="handleExceed" :on-error="handleError" :file-list="uploadList" :with-credentials="true" :auto-upload="true" />
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@change="onEditorChange($event)"
</quill-editor>
// 内容改变事件
onEditorChange({ quill, html, text }) {
console.log('editor change!', quill, html, text)
this.content = htmlthis.$emit('change', html)
},
// 文件上传限制
handleExceed(files, fileList) {
this.$message.warning(`当前限制一次性上传最多 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`)
},
// 文件上传失败提示
handleError(err, file, fileList) {
this.$message.warning(`文件上传失败,请尝试重新上传,文件失败原因为: ${err}`)
}
4.配置option
editorOption: {
placeholder: '请在这里输入文字或粘贴图片',
theme: 'snow',
modules: {
toolbar: {
container: toolbarOptions,
handlers: {
image: function(value) {
if (value) {
document.querySelector('#quill-upload input').click()
} else {
this.quill.format('image', false)// 禁用quill内部上传图片
}
}
}
}
}
}
toolbarOptions:[
[],
// ['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': []}],
// [{'align': []}],
// ['link', 'image', 'video'],
['clean']
]
5.初始化编辑器并添加粘贴事件
粘贴图片调用接口,转换base64格式图片
// 初始化
initPic() {
if (this.init) {
setTimeout(() => {
this.init = false
toolbarOptions[0] = ['image']
const quill = this.$refs.myQuillEditor.quill
this.$forceUpdate()
quill.root.addEventListener(
'paste',
(evt) => {
if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) {
evt.preventDefault(); // 必须阻止默认行为,会粘贴两次,并且图片的base64格式
[].forEach.call(evt.clipboardData.files, (file) => {
if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
return
}
var formData = new FormData()
formData.append('uploadFile', file)
uploadPicTask({
data: formData
}).then((res) => {
var range = quill.getSelection()
if (range) {
// this.ruleForm.problemPics = this.ruleForm.problemPics + ',' + res.data
const quill = this.$refs.myQuillEditor.quill
const length = quill.getSelection().index
quill.insertEmbed(length, 'image', '/api/management/problem/pic/' + res.data)
quill.setSelection(length + 1)
// eslint-disable-next-line no-unused-vars
let fileType = null
if (file.raw && file.raw.type) {
fileType = file.raw.type
} else {
fileType = file.type
}
this.uploadList = []
this.$refs.myQuillEditor.quill.setSelection(range.index + 1)
}
})
})
}
},
false
)
}, 10)
}
},