官网(需要魔法 全英文)https://vueup.github.io/vue-quill/guide/
安装下载npm install @vueup/vue-quill@beta
main.js引入
import { createApp } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
const app = createApp(App)
app.component('QuillEditor', QuillEditor)
配置文件参考
const uploadConfig = {
name: 'uploadFile',
size: 500,
accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'
}
const toolOptions = [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
['link', 'image']
]
const handlers = {
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() {
var formData = new FormData()
formData.append(uploadConfig.name, fileInput.files[0])
if (uploadConfig.token) {
formData.append('token', uploadConfig.token)
}
uploadPicture(formData).then(res=>{
const length = self.quill.getSelection(true).index
res.path = res.data.url
self.quill.insertEmbed(length, 'image', res.path)
self.quill.setSelection(length + 1)
})
})
this.container.appendChild(fileInput)
}
fileInput.click()
}
}
import { uploadPicture } from '../../http/index'
export default {
placeholder: '',
theme: 'snow',
modules: {
toolbar: {
container: toolOptions,
handlers: handlers
}
}
}
VUE组件内使用
<script>
import quillConfig from './quill-config'
const QuillEditor1 = ref(null)
function sendDemand() {
QuillEditor1.value.getHTML()
submitCommentLoading.value = true
}
</script>
<template>
<QuillEditor :options="quillConfig" ref="QuillEditor1" class="quill-editor" theme="snow" />
<van-button :loading="submitCommentLoading" size="small" type="primary" @click="sendDemand"> 提交</van-button>
</template>
axios({
baseURL: import.meta.env.VITE_APP_BASE_API,
timeout: 4*2000,
method: "post",
url: `upload/image`,
data: getFormData(obj),
headers: { 'Content-Type':'application/x-www-form-urlencoded',
'Authorization': `Bearer ${store.state.token}`}
}).then(res=>{
const length = self.quill.getSelection(true).index
res.path = res.data.data.url
self.quill.insertEmbed(length, 'image', res.path)
self.quill.setSelection(length + 1)
})