首页 > web前端 > Vue.js > 正文

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

PHPz
发布: 2023-05-20 16:16:06
转载
2741 人浏览过

一、效果展示

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: &#39;info&#39;,
        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"]
              // [&#39;addBtn&#39;]
            ] // 自定义工具栏选项
          }
        }
      })
      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富文本并限制输入字数的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:yisu.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!