vue3使用vueup/vue-quill富文本、并限制輸入字?jǐn)?shù)的方法處理

更新時間：2023年03月14日 14:46:48 作者：小任睡不醒`

這篇文章主要介紹了vue3使用vueup/vue-quill富文本、并限制輸入字?jǐn)?shù),本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

一、效果展示

二、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  }

五、總結(jié)問題（簡單記錄一下笨方法處理的）

1、雙向綁定：v-model:content(一定加content)

2、change事件：@update:content

3、填寫下一個富文本上一個未清空時： myQuillEditor.value.setHTML('')強(qiáng)制清空一下

4、編輯進(jìn)入的時候：強(qiáng)制設(shè)置一下內(nèi)容；并且延遲設(shè)置一下字?jǐn)?shù)

nextTick(()=>{TiLength.value =myQuillEditor.value.getText().length-1 })

到此這篇關(guān)于vue3使用vueup/vue-quill富文本、并限制輸入字?jǐn)?shù)的文章就介紹到這了,更多相關(guān)vue3使用vueup/vue-quill富文本內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: