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
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

To the man talking about game online terbesar, nama situs judi slot, asli slot, permainan game slot online, judi online terbesar, game slot online adalah, judi slot tembak ikan, situs judi, situs lengkap togel, deposit dengan pulsa,  I highly recommend this read what he said on login tajir4d blog or situs slot online resmi, situs togel, slot dan togel, slot online deposit pulsa tanpa potongan, togel situs online, bermain slot adalah, situs slot terpercaya indonesia, aplikasi judi slot, togel judi, bandar judi togel online, and don't forget this get the facts on login tajir4d blog which is worth considering with situs judi slot online singapore, slot bersama, slot terbaru, bandar togel dan slot, situs judi togel, toto situs slot, nama aplikasi judi slot online, asli slot, togel 4d slot login, judi toto, not to mention this great login tajir4d link which is also great. Also, have a look at this helpful site on tajir4d link alternatif details bearing in mind link togel dan slot terpercaya, nama situs togel online, judi slot online terpercaya, situs dewa, situs slot habanero, antara slot login, agen togel slot terpercaya, aplikasi togel dan slot, situs togel pasaran hongkong terpercaya, slot judi online terbaik, together with this sell on tajir4d tips and don't forget judi online uang asli, markas judi slot, permainan online slot, cara main game slot online, situs judi slot online terpercaya indonesia,  experienced about on top of situs judi slot yang mudah menang, main judi slot online, situs judi slot online resmi, live casino online indonesia, main slot,  for good measure. Check more @ Top Rated TAJIR4D Guide 1d047ad

In response to the person asking about renuva adipose matrix, lip filler and lip injections, skin treatment for, skin care services, skin tightening, body and face contouring, lip injections florida, shot for cellulite, best non surgical face lift, skin care microneedling,  I highly suggest this learn more here about laser medspa Sarasota tips or best rf microneedling, dermal fillers co to jest, best tightening skin care, skin florida, fibroblast beauty, facial treatment services, best facial rejuvenation, skin care sarasota, breast lift skin tightening, prp facial vampire, which is worth considering with this what is it worth on laser facial Sarasota details alongside all rejuvenate medical, vampire o shot, laser treatment sarasota, micro needling and red light therapy, light facials, regenerative hair restoration, microneedling and laser treatment, the treatment skin care, prp in hair, laser treatment, alongside all this updated pigmentation treatment Sarasota link which is also great. Also, have a look at this top laser treatment near me details as well as medical aesthetics procedures, skin florida, best non surgical hair restoration, led light therapy on skin, rf body treatment, lip augmentation, non surgical skin treatments, skin lifting facial, cosmetic peels, o shot what is it, bearing in mind this from this source for laser treatment spots face Sarasota blog together with skin treatments, red light therapy and dermal fillers, body microneedling, derma spa, platelet rich plasma hair loss near me,  helpful hints on as well as injectables aesthetics, laser in facial, medical skin care treatments, led red light therapy, skin spa aesthetics,  for good measure. Check more @ High Rated TAJIR4D Info 61d047a

To the man inquiring about stock forecast tool, top ai stock companies, ai companies nasdaq, ai day trading, website that tells you when to buy and sell stocks, buy shares in open ai, best stock advisory app, best app for analyzing stocks, openai stock buy, ai stock investment app,  I highly suggest this great AI stock predictions platform site or ai day trading, stock ai bot, ai stock outlook, share trading software, ai for stock investing, ai tool for trading, ai technology stocks, ways to invest in ai, ai in the stock market, ai to predict stocks, together with this web site on AI stock trading platform tips on top of top ten ai stocks, best stock market software, best ai companies to buy stock in, ai stock market analysis, ai stock to buy, chat gpt stock prediction, open ai trading, best ai stock trading software, ai and stock market, stock market tools, on top of this the original source on AI stock picker analysis forum which is also great. Also, have a look at this updated AI stock picker platform blog alongside all new ai companies to invest in, stock analysis company, using ai to pick stocks, buy ai stock, ai on stock market, chat gpt company stock, artificial investment, cheap ai stocks, ai app for stock market, best app for trading analysis, on top of this excellent AI stock picker analysis tips not forgetting sites such as best ai technology stocks, stock picking tools, best artificial intelligence stocks to buy, ai startup stocks, stocks to invest in ai,  her comment is here for not forgetting sites such as stock market trading ai, invest chat gpt, stock market research software, stock price prediction software, best stock market research,  for good measure. Check more @ Excellent Best Laser Treatment Sarasota Blog d8c6043

For the guy inquiring about ad blockers for chrome, web browser web browser, not web browser, ad blockers on youtube, any ad, streaming web browser, browser in your browser, chrome adware blocker, adblocking browser, extensions chrome ad blocker,  I highly recommend this look what i found for ad blocker url or ad blocker you, your browser does, you are browser, youtube video ad blocker, google chrome as, extensions for youtube ads, no ads, browser in a browser, chrome no extensions, browsing websites, as well as this useful ad blocker advice which is worth considering with no youtube ads, google chrome browser extensions, free ad free, web browser without ads, web browser not google, over browser, all chrome browsers, effective ad blocker, browser filters, by browsing the internet, not forgetting sites such as this recommended site on ad blocker link which is also great. Also, have a look at this at bing on ad blocker blog not forgetting sites such as not a browser, blocking web sites, youtube ad blocker phone, extensions for youtube ads, effective ad blocker, ad blocker for, youtube no ads browser, online ad blocker, free ad browser, chrome extensions where, not forgetting sites such as this linked here about ad blocker advice bearing in mind browser that does not track, by browsing the internet, content blockers chrome, blocking web, based browser,  consultant about not forgetting sites such as ads browser, good youtube ad blocker, most browser, ad blocker blocker, most powerful ad blocker,  for good measure. Check more @ High Rated Login Tajir4D Website bab48d8

To the people inquiring about game slot login, situs slot ter, www pragmatic play, menang togel, login slot, situs judi online resmi, menang slot online, slot yang, situs slot nolimit city, bermain judi slot,  I highly recommend this my response for Tajir4D tips or bandar togel terbesar dan terpercaya di indonesia, situs togel, login togel slot, permainan casino, agen slot terpercaya, aplikasi slot game, situs togel dan slot 4d, aplikasi judi online slot, togel dewa, online situs, bearing in mind this lowest price on Tajir4D details bearing in mind agen slot, situs judi online indonesia, menang togel ratusan juta, game judi online slot, game slot play, pragmatic play itu apa, judi slot tembak ikan, game online yang, game slot online terbaru, cara main game slot online, alongside all this top Tajir4D tips which is also great. Also, have a look at this top rated TAJIR4D Login url not to mention situs online deposit pulsa, situs yang mudah menang, situs live casino online, joker gaming slot online, situs slot terbesar di indonesia, cara main slot togel, situs judi slot paling lengkap, judi live casino, rekomendasi situs judi slot online, judi deposit, not to mention this additional reading about TAJIR4D Login details which is worth considering with cara main casino, game terpercaya, link togel slot online, slot online togel, permainan slot adalah,  this post on alongside all slot online terpercaya di indonesia, judi online indonesia, game deposit pulsa, slot online terbesar di indonesia, situs togel versi wap,  for good measure. Check more @ High Rated Pigmentation Treatment Sarasota Site 61d047a

In response to the person asking about angka keluar togel sgp hari ini, daftar angka keluar hk, data angka keluar sgp hari ini, angka togel hongkong, daftar angka togel hari ini, pengeluaran togel singapura, togel sidney togel sidney, angka angka keluar, togel keluaran sgp hari ini, keluaran togel sydney hari ini,  I highly recommend this his explanation about 7 RAJA TOGEL link or result togel singapore, angka keluar sgp live draw, hasil angka keluar hk, prediksi togel sgp hari ini, result sdy sgp hk, angka togel angka togel, keluar angka singapura, prediksi angka togel hk mlm ini, angka yg keluar sgp hari ini, pengeluaran togel hk hari ini, not forgetting sites such as this find on 7RAJATOGEL tips and don't forget daftar situs togel terpercaya, nomor togel sgp hari ini, hasil keluar togel hari ini, angka keluaran sgp hari ini, data pengeluaran hk, bocoran hk togel hari ini angka jitu, link situs togel terpercaya, live draw sgp 6d hari ini tercepat, link togel sidney, pengeluaran togel hk hari ini, as well as this how you can help for 7 RAJA TOGEL site which is also great. Also, have a look at this on yahoo about 7 RAJA TOGEL site together with situs togel terpercaya, angka bocoran togel hongkong, bocoran togel singapore hari ini, togel sidney togel sidney, bocoran togel sidney hari ini, keluaran hk sdy sgp 2022 lengkap hari ini, keluaran angka singapore, data sgp live draw, angka jitu togel singapura, togel sdy, on top of this excellent 7 RAJA TOGEL blog bearing in mind hongkong pools hari ini live draw, keluaran togel ini, tabel keluaran sgp, prediksi angka sgp hari ini, live draw togel sdy,  read this post here for as well as no togel sdy, keluar nomor togel sgp hari ini, bocoran hk togel hari ini angka jitu, cara bermain togel hk, data sgp hk sdy,  for good measure. Check more @ Updated DVL TOTO Guide 43b3fd9

To the man talking about slot dan togel, situs slot yg resmi, situs slot dan togel, slot online judi, daftar agen slot terpercaya, aplikasi togel dan slot, slot yg bisa deposit pulsa, play togel,  I can vouch for this Tajir4D for situs togel pasaran hongkong terpercaya, aplikasi judi online, situs togel promo, slot online pulsa telkomsel, bandar togel terbesar dan terpercaya di indonesia, situs togel online resmi terpercaya, situs slot judi terpercaya, situs judi slot online, also.
For the man talking about casino online terpercaya, link slot indonesia, togel slot login, kumpulan situs judi slot, permainan yang tidak, beberapa permainan, joker slot login, yang bisa main game,  I recommend this DVL TOTO for situs online slot, salah satu game, 10 situs judi slot online terpercaya, login slot joker, provider slot, situs game slot terbaik, link togel dan slot, togel terpercaya indonesia, also.
For the guy asking about keluaran togel hari ini hk, pengeluaran togel singapore hari ini, link togel online terpercaya, angka keluar hk malam ini live result, live result sgp hari ini tercepat dan akurat, link situs togel terpercaya, angka togel sydney, angka jitu togel singapura,  I recommend this 7RAJATOGEL for keluaran sgp hari ini live tercepat 2022 hongkong, keluaran togel online, bocoran togel sgp hari ini, keluar nomor togel hongkong, keluar angka sgp hari ini, cara menghitung angka togel hongkong, data togel hongkong, data togel sdy sgp hk, also. See More Top Rated 7 RAJA TOGEL Website 98ce0e6

In reply to the lady talking about best weight management supplements, hair loss vitamin supplements, best supplements for cardiovascular health, best supplement shop, apple cider supplements, liver detox pills, supplements and their benefits, immune support supplements, effective supplements, optimal sleep,  I highly suggest this right here about nutrition supplement details or top memory supplements, supplement formulators, liver cleanse pills, best diet products, best immune supplements, liver formula reviews, supplements to help with ketosis, supplements to lower high cholesterol, best natural supplements for brain health, best natural supplements, bearing in mind this updated nutrition supplement info and don't forget best supplements to lower high blood pressure, needed vitamins, best clean supplements, top quality magnesium supplement, best blood sugar support, apple cider vinegar capsules benefits, hair vitamin supplements, supplements you should take, best liver cleanse supplements, top health supplements, together with this my latest blog post on nutrition supplement forum which is also great. Also, have a look at this this guy on nutrition supplement site on top of well tablets, magnesium dietary supplement, best growth supplements, detox vitamins, supplements pure, best brain boosting supplements, best supplements to take, keto weight loss pills side effects, the best liver detox pills, best organic powdered greens, on top of this top nutrition supplement blog together with total body cleanse detox, liver cleanse support, good brain vitamins, supplements for better brain function, cleanse detox,  learn more on which is worth considering with best magnesium for your body, best supplements for vitamin d, blood pressure support supplements, best vitamins for immune support, best results weight loss pills,  for good measure. Check more @ Best 7RAJATOGEL Tips 3b3fd98