vue3利用quill富文本编辑器，保姆级教程，富文本踩坑办理

vue3利用quilleditor

本文是封装成组件利用

先放结果图

1. // 安装插件
2. npm install @vueup/vue-quill@alpha --save
3. // 局部引入
4. import { QuillEditor } from '@vueup/vue-quill'
5. import '@vueup/vue-quill/dist/vue-quill.snow.css'

复制代码

先封装组件，创建如下目次

全部代码如下,

1. <template>
2.   <div>
3.           <!-- 此处注意写法v-model:content -->
4.     <QuillEditor ref="myQuillEditor"
5.       theme="snow"
6.       v-model:content="content"
7.       :options="data.editorOption"
8.       contentType="html"
9.       @update:content="setValue()"
10.     />
11.     <!-- 使用自定义图片上传 -->
12.     <input type="file" hidden accept=".jpg,.png" ref="fileBtn" @change="handleUpload" />
13.   </div>
14. </template>
16. <script setup>
17. import { QuillEditor } from '@vueup/vue-quill'
18. import '@vueup/vue-quill/dist/vue-quill.snow.css'
19. import { reactive, onMounted, ref, toRaw, watch } from 'vue'
21. const props = defineProps(['value'])
22. const emit = defineEmits(['updateValue'])
23. const content = ref('')
24. const myQuillEditor = ref()
25. // 通过watch监听回显，笔者这边使用v-model:content 不能正常回显
26. watch(() => props.value, (val) => {
27.   toRaw(myQuillEditor.value).setHTML(val)
28. }, { deep: true })
29. const fileBtn = ref()
30. const data = reactive({
31.   content: '',
32.   editorOption: {
33.     modules: {
34.       toolbar: [
35.         ['bold', 'italic', 'underline', 'strike'],
36.         [{ 'size': ['small', false, 'large', 'huge'] }],
37.         [{ 'font': [] }],
38.         [{ 'align': [] }],
39.         [{ 'list': 'ordered' }, { 'list': 'bullet' }],
40.         [{ 'indent': '-1' }, { 'indent': '+1' }],
41.         [{ 'header': 1 }, { 'header': 2 }],
42.         ['image'],
43.         [{ 'direction': 'rtl' }],
44.         [{ 'color': [] }, { 'background': [] }]
45.       ]
46.     },
47.     placeholder: '请输入内容...'
48.   }
49. })
50. const imgHandler = (state) => {
51.   if (state) {
52.     fileBtn.value.click()
53.   }
54. }
55. // 抛出更改内容，此处避免出错直接使用文档提供的getHTML方法
56. const setValue = () => {
57.   const text = toRaw(myQuillEditor.value).getHTML()
58. }
59. const handleUpload = (e) => {
60.   const files = Array.prototype.slice.call(e.target.files)
61.   // console.log(files, "files")
62.   if (!files) {
63.     return
64.   }
65.   const formdata = new FormData()
66.   formdata.append('file', files[0])
67.   backsite.uploadFile(formdata)  // 此处使用服务端提供上传接口
68.     .then(res => {
69.       if (res.data.url) {
70.         const quill = toRaw(myQuillEditor.value).getQuill()
71.         const length = quill.getSelection().index
72.         quill.insertEmbed(length, 'image', res.data.url)
73.         quill.setSelection(length + 1)
74.       }
75.     })
76. }
77. // 初始化编辑器
78. onMounted(() => {
79.   const quill = toRaw(myQuillEditor.value).getQuill()
80.   if (myQuillEditor.value) {
81.     quill.getModule('toolbar').addHandler('image', imgHandler)
82.   }
83. })
84. </script>
85. <style scoped lang="scss">
86. // 调整样式
87. :deep(.ql-editor) {
88.   min-height: 180px;
89. }
90. :deep(.ql-formats) {
91.   height: 21px;
92.   line-height: 21px;
93. }
94. </style>

复制代码

利用

1. <template>
2.   <div class="page">
3.         <Editor :value="emailForm.msg" @updateValue="getMsg" />
4.   </div>
5. </template>
7. <script setup>
8. import Editor from '@/components/Editor/index.vue'
10. const emailForm = reactive({
11.   test_msg: ''
12. })
13. const getMsg = (val) => {
14.   emailForm.msg = val
15. }
16. </script>

复制代码

本文是第二个页面利用这个富文本编辑器有大概watch监听中找不到ref，如果不能正常利用可以轻微改装下在onMounted里赋值然后在setValue里抛出就好

1. <template>
2.   <div>
3.     <QuillEditor ref="myQuillEditor"
4.       theme="snow"
5.       v-model:content="content"
6.       :options="data.editorOption"
7.       contentType="html"
8.       @update:content="setValue()"
9.     />
10.     <!-- 使用自定义图片上传 -->
11.     <input type="file" hidden accept=".jpg,.png" ref="fileBtn" @change="handleUpload" />
12.   </div>
13. </template>
15. <script setup>
16. import { QuillEditor } from '@vueup/vue-quill'
17. import '@vueup/vue-quill/dist/vue-quill.snow.css'
18. import { reactive, onMounted, ref, toRaw, watch } from 'vue'
19. // import { backsite } from '@/api'
21. const props = defineProps(['value'])
22. const emit = defineEmits(['updateValue'])
23. const content = ref('')
24. const myQuillEditor = ref()
25. // watch(() => props.value, (val) => {
26. //   console.log(toRaw(myQuillEditor.value))
27. //   toRaw(myQuillEditor.value).setHTML(val)
28. // }, { deep: true })
29. const fileBtn = ref()
30. const data = reactive({
31.   content: '',
32.   editorOption: {
33.     modules: {
34.       toolbar: [
35.         ['bold', 'italic', 'underline', 'strike'],
36.         [{ 'size': ['small', false, 'large', 'huge'] }],
37.         [{ 'font': [] }],
38.         [{ 'align': [] }],
39.         [{ 'list': 'ordered' }, { 'list': 'bullet' }],
40.         [{ 'indent': '-1' }, { 'indent': '+1' }],
41.         [{ 'header': 1 }, { 'header': 2 }],
42.         ['image'],
43.         [{ 'direction': 'rtl' }],
44.         [{ 'color': [] }, { 'background': [] }]
45.       ]
46.     },
47.     placeholder: '请输入内容...'
48.   }
49. })
50. const imgHandler = (state) => {
51.   if (state) {
52.     fileBtn.value.click()
53.   }
54. }
55. const setValue = () => {
56.   const text = toRaw(myQuillEditor.value).getHTML()
57.   emit('updateValue', text)
58. }
59. const handleUpload = (e) => {
60.   const files = Array.prototype.slice.call(e.target.files)
61.   // console.log(files, "files")
62.   if (!files) {
63.     return
64.   }
65.   const formdata = new FormData()
66.   formdata.append('file', files[0])
67.   // backsite.uploadFile(formdata)
68.   //   .then(res => {
69.   //     if (res.data.url) {
70.   //       const quill = toRaw(myQuillEditor.value).getQuill()
71.   //       const length = quill.getSelection().index
72.   //       // 插入图片，res为服务器返回的图片链接地址
73.   //       quill.insertEmbed(length, 'image', res.data.url)
74.   //       // 调整光标到最后
75.   //       quill.setSelection(length + 1)
76.   //     }
77.   //   })
78. }
79. onMounted(() => {
80.   const quill = toRaw(myQuillEditor.value).getQuill()
81.   if (myQuillEditor.value) {
82.     quill.getModule('toolbar').addHandler('image', imgHandler)
83.   }
84.   toRaw(myQuillEditor.value).setHTML(props.value)
85. })
86. </script>
87. <style scoped lang="scss">
88. :deep(.ql-editor) {
89.   min-height: 180px;
90. }
91. :deep(.ql-formats) {
92.   height: 21px;
93.   line-height: 21px;
94. }
95. </style>

复制代码

保姆级教程，有题目欢迎提出

来源：https://blog.csdn.net/moanuan/article/details/128240291
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！