vue3使用vueup/vue-quill富文本、並限制輸入字數的方法處理
vue3中使用富文本實在是踩瞭太多坑瞭,大概記錄一下笨方法處理,有好的方法多交流
一、效果展示
二、npm
npm install @vueup/vue-quill@alpha --save
三、main.js引入
import { QuillEditor } from '@vueup/vue-quill' import '@vueup/vue-quill/dist/vue-quill.snow.css'; app.component('QuillEditor',QuillEditor)
四、頁面使用
<quill-editor v-model:content="htmlValue" ref="myQuillEditor" contentType="html" :options="editorOption" @update:content="onEditorChange($event)"> </quill-editor> <div class="editor_length">{{ TiLength }}/500</div>
const htmlValue=ref("") const TiLength =ref(0) const myQuillEditor=ref(null) const editorOption=reactive({ theme: "snow", // 主題 // debug: 'info', placeholder: "請輸入其他說明", modules: { toolbar: { container: [ ["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: [] }] // ["clean", "link", "image"] // ['addBtn'] ] // 自定義工具欄選項 } } }) const onEditorChange=(e)=>{ // console.log(myQuillEditor.value.getText().length); // console.log(TiLength.value); TiLength.value =myQuillEditor.value.getText().length-1 if(TiLength.value>500){ myQuillEditor.value.setText(myQuillEditor.value.getText().slice(0,500)) return } } return{ htmlValue,editorOption,onEditorChange,TiLength,myQuillEditor }
五、總結問題(簡單記錄一下笨方法處理的)
1、雙向綁定:v-model:content(一定加content)
2、change事件:@update:content
3、填寫下一個富文本上一個未清空時: myQuillEditor.value.setHTML('')強制清空一下
4、編輯進入的時候:強制設置一下內容;並且延遲設置一下字數
nextTick(()=>{TiLength.value =myQuillEditor.value.getText().length-1 })
到此這篇關於vue3使用vueup/vue-quill富文本、並限制輸入字數的文章就介紹到這瞭,更多相關vue3使用vueup/vue-quill富文本內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue使用vue-quill-editor富文本編輯器且將圖片上傳到服務器的功能
- Vue element商品列表的增刪改功能實現
- vue項目打包優化的方法實戰記錄
- vue集成一個支持圖片縮放拖拽的富文本編輯器
- vue項目完成後如何實現項目優化的示例