富文本框vue-quill-editor的使用
Vue 文本框 Editor 使用
2023-09-14 08:58:55 时间
vue-quill官网:https://www.npmjs.com/package/vue-quill-editor
quill官网:https://quilljs.com/docs/quickstart/
基本用法这里就不介绍了,这里介绍下特殊用法:
怎么添加 自定义blots 和 自定义toolbar控件
<template> <QuillEditor ref="editor" v-model="content" :options="editorOption"> <div id="toolbar" slot="toolbar"> <select class="ql-size"> <option value="small">小</option> <option selected>常规</option> <option value="large">大</option> <option value="huge">特大</option> </select> <button type="button" class="ql-bold"></button> <button type="button" class="ql-italic"></button> <button type="button" class="ql-underline"></button> <select class="ql-color"></select> <button type="button" class="ql-image"></button> <button type="button" class="ql-list" value="ordered"></button> <button type="button" class="ql-list" value="bullet"></button> <select class="ql-align"></select> <!-- 自定义控件 --> <button @click="addMyBlot">自定义按钮</button> </div> </QuillEditor> </template> <script> import { Quill } from 'vue-quill-editor'; // 拿到内嵌 const Embed = Quill.import('blots/embed'); class myBlot extends Embed { static blotName = 'myblot'; static tagName = 'myblot'; static create(value) { const node = super.create(value); node.innerHTML = value; node.setAttribute('id', value); return node; } } // 注册 Quill.register(myBlot); export default { data() { return { content: '', editorOption: { placeholder: '请输入文本...', modules: { toolbar: '#toolbar', }, }, } }, method: { // vue-quill的小bug // 虽然是双向绑定,但不能直接改content,ql-editor的innerHTML,不然blot的value会变为true setContent(innerHTML) { setTimeout(() => { const quill = this.$refs['editor'].quill; quill.container.querySelector('.ql-editor').innerHTML = innerHTML }) }, addMyBlot() { const quill = this.$refs['editor'].quill; quill.insertEmbed(index, 'myblot', 'balabala。。。'); } } } </script>
相关文章
- [ Vue ] vue 设计原理之响应式系统实现笔记( 二 )
- Vue自定义指令&键盘修饰符
- vue-router(路由)详细教程
- vue项目如何刷新当前页面「建议收藏」
- 深入浅出vue响应式原理
- 请简述什么是Vue组件化开发_vue组件化开发
- Vue项目中使用TinymMCE富文本
- vue.js 渲染函数_Vue.js的不可渲染且可扩展的RTF编辑器[通俗易懂]
- axios实现跨域三种方法_vue跨域配置
- vue eslint报错_如何关闭eslint
- Vue生成二维码_视频生成二维码软件
- vue 调用子组件方法失败_Vue子组件调用父组件的方法及常见问题「建议收藏」
- Vue调试工具安装(vue devtools)
- vue axios传中文参数导致乱码的解决方案
- 今天讲vue讲解专栏里的VUE组件
- Vue学习笔记(二)
- vue组件通信6种方式总结(常问知识点)1
- 我的Vue.js生态开源之旅
- vue.js客服系统实时聊天项目开发(二十二)vue项目中router.js路由介绍
- Vue基础②
- Vue常见面试题
- 开心档之Vue教程2
- ruoyi-vue版本(十二)用户登陆的逻辑,在线用户的查询与强退出 思路
- 使用Vue框架使用MSSQL数据库实现快速开发(vue mssql)
- Vue接入Redis拓展应用的可能性(vue调redis)
- Vue抢跑Redis速度感受实时重磅数据(vue获取redis)
- Vue实现Redis订阅消息的实现方案(vue 订阅redis)
- Vue用Redis储存获取数据(vue获取redis)
- 从零开始Vue项目中使用Redis(vue使用redis)