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富文本内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue 使用addRoutes动态添加路由及刷新页面跳转404路由的问题解决方案
我自己使用addRoutes动态添加的路由页面,使用router-link标签可以跳转,但是一刷新就会自动跳转到我定义的通配符 * 指向的404路由页面,这说明没有找到指定路由才跳到404路由的,这样的情况如何处理呢,下面小编给大家分享解决方案,一起看看吧2023-10-10关于vue3.0中的this.$router.replace({ path: ''/''})刷新无效果问题
这篇文章主要介绍了关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-01-01vue+axios实现文件下载及vue中使用axios的实例
这篇文章主要介绍了vue+axios实现文件下载及vue中使用axios的实例,需要的朋友可以参考下2018-09-09
最新评论