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)

登录后复制

四、页面使用

{{ TiLength }}/500

登录后复制

      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富文本并限制输入字数的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3229857.html

(0)
上一篇 2025年4月1日 16:21:46
下一篇 2025年4月1日 16:21:59

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论