vue-quill-editor的用法
2024-09-06 22:55:37
1. main.js引入vue-quill-editor
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor)
2. 具体代码
<template>
<quill-editor v-model="txt" ref="richAnalysis" :options="options"></quill-editor>
</template>
export default {
data() {
return {
txt: '',
options: {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike', {'script': 'sub'}, {'script': 'super'}]
]
},
placeholder: '请输入内容'
}
}
},
mounted() {
// 阻止光标默认选中
this.$refs.richAnalysis.quill.enable(false);
setTimeout(() => {
this.$refs.richAnalysis.quill.enable(true);
this.$refs.richAnalysis.quill.blur();
}, 200)
}
}
3. 光标处插入内容,光标位置向前移动一位
addBlock() {
document.execCommand('insertText', true, '{q:}') // 光标处插入内容{q:}
this.$nextTick(() => {
const index = this.$refs.richAnalysis.quill.selection.savedRange.index
this.$refs.richAnalysis.quill.setSelection(index -1, 0) // 光标位置移动到冒号之后
})
}
最新文章
- .net core Jwt 添加
- UVa401 回文词
- hdu2368Alfredo&#39;s Pizza Restaurant
- HDU4911-Inversion(树状数组)
- automaticallyAdjustsScrollViewInsets (iOS)
- AJAX(XMLHttpRequest)进行跨域请求方法详解(三)
- 支持苹果IPV6 ONLY 的socket 修改方法
- SQL Server 执行计划操作符详解(1)——断言(Assert)
- Httpclient发送json请求
- 性能测试学习 第八课--LR12中针对WebServices协议的三种脚本开发模式
- Dungeon Master (广搜)
- Form-encoded method must contain at least one @Field.
- java多线程快速入门(九)
- 总结5条对学习Linux系统有帮助的经验心得
- spring事务中出现oracle游标溢出的解决方案
- Vue2.5开发去哪儿网App 第二章笔记
- 树莓派开发系列教程2--树莓派3B介绍及系统烧写、基本配置
- 【重点】Jmeter----- 将 JDBC Request 查询结果作为下一个接口参数方法(二)
- list 往指定的下标插入元素
- SQL注入点的类型