91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue3怎么使用vueup/vue-quill富文本并限制輸入字數

發布時間:2023-03-14 15:23:57 來源:億速云 閱讀:439 作者:iii 欄目:開發技術

這篇文章主要講解了“vue3怎么使用vueup/vue-quill富文本并限制輸入字數”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“vue3怎么使用vueup/vue-quill富文本并限制輸入字數”吧!

一、效果展示

vue3怎么使用vueup/vue-quill富文本并限制輸入字數

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

感謝各位的閱讀,以上就是“vue3怎么使用vueup/vue-quill富文本并限制輸入字數”的內容了,經過本文的學習后,相信大家對vue3怎么使用vueup/vue-quill富文本并限制輸入字數這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

华安县| 铜陵市| 新安县| 峨眉山市| 于都县| 远安县| 金乡县| 独山县| 广宁县| 钟祥市| 延寿县| 井陉县| 潞西市| 濮阳市| 五寨县| 扶风县| 常宁市| 离岛区| 隆回县| 朝阳市| 开阳县| 肥乡县| 衡阳县| 宁强县| 桦南县| 蓬莱市| 乌恰县| 寻甸| 太仆寺旗| 电白县| 旺苍县| 阆中市| 南宁市| 仙桃市| 奉节县| 天峨县| 鄂州市| 密山市| 大化| 陇西县| 临高县|