浅谈关于quill在vue中的使用

根据公司项目要求使用富文本进行一些列功能实现这里使用quill.js实现插入与替换功能

quill.js官方api文档链接：Quill官方中文文档 · 看云

一,通过npm命令安装

npm install quill --save

二,封装富文本编辑器 editor.vue

<template><div><div class="editor"></div></div>
</template><script>
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
export default {name: 'editor',props: {value: String},data() {return {indexCursor:null,lengthCursor:null,quill:null,options: {theme: 'snow',modules: {toolbar: [["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线["blockquote", "code-block"], // 引用  代码块[{ header: 1 }, { header: 2 }], // 1、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", "video"] // 链接、图片、视频], //工具菜单栏配置},placeholder: '请输入内容'}}},mounted() {//初始化编辑器this.onEditorFocus()}),cerated(){//注意在这里打印this.quill是为空console.log(this.quill)//null},methods:{onEditorFocus(){let dom = this.$el.querySelector('.editor')this.quill = new Quill(dom, this.options);//文本框内默认内容可解析HTML详情看官网this.quill.clipboard.dangerouslyPasteHTML(0, this.value);this.quill.on('selection-change',()=>{//我的理解为光标每落在编辑器上将执行if(this.quill.getSelection()){const {index,length} = this.quill.getSelection();Object.assign(this,{indexCursor:index,//字符在编辑器的下标lengthCursor:length//选中的字符长度})}})},//替换操作 onchange(int){//需要用来替换的文本在父组件存储好了，这里拿出来const replaceText=this.$store.state.cat.replaceText//选择字符长度需大于0if(this.lengthCursor>0){if(replaceText!=''){  this.quill.deleteText(this.indexCursor,this.lengthCursor);//先删除
this.quill.insertText(this.indexCursor, replaceText,'bold', true);//后插入this.DELECT_RPLACETEXT('')//清空存储好的文本} }else{this.$message.error('请选中需要被替换的文本');}}}}
}
</script>

三，在父组件中

<template><div><button @click="replace">点我替换</button><Editor v-model="content"  ref="editor"/></div></template><script>import Editor from './editor/editor.vue'//引入封装好的编辑器export default {components:{GraphicMaterial,Editor},data() {return{content:"<h1>文本标题</h1>"，titleText:"替换标题文本"}},methods:{replace(){this.$store.state.cat.replaceText=titleText//存入vuexthis.$refs.editor.onchange() //调用子组件onchange方法}   }}
</script>

官网文档api都可以通过this.quill使用啦不得不说这个富文本还是很牛逼的，美中不足的是在IE系列浏览器中它只兼容IE10+

我可能描述的不是很清楚因为我真的就是个新手前端，请大佬们多指教！

另外贴出俩篇我觉得很有营养的文章

富文本编辑器 vue-quill-editor入门（使用，显示，表格支持）_dangsh_的博客-CSDN博客_vue-quill-editor 表格
在Vue中使用富文本编辑器Quill - SegmentFault 思否

浅谈关于quill在vue中的使用相关推荐

[原创]浅谈持续集成在测试中的应用
[原创]浅谈持续集成在测试中的应用今天抽空理了下思路,来谈谈持续集成在测试中的应用,关于持续集成的介绍,可以参见我之前写的浅谈我对持续集成的理解. 闲话少说,简单先介绍下,持续集成在测试中应用的范 ...
java执行jar中的main_浅谈java 执行jar包中的main方法
浅谈java 执行jar包中的main方法通过 OneJar 或 Maven 打包后 jar 文件,用命令: java -jar ****.jar 执行后总是运行指定的主方法,如果 jar 中有多个 ...
python竞赛_浅谈Python在信息学竞赛中的运用及Python的基本用法
浅谈Python在信息学竞赛中的运用及Python的基本用法前言众所周知,Python是一种非常实用的语言.但是由于其运算时的低效和解释型编译,在信息学竞赛中并不用于完成算法程序.但正如LRJ在& ...
计算机技术在排水领域的应用,浅谈计算机技术在市政给排水中的应用.doc
浅谈计算机技术在市政给排水中的应用.doc 浅谈计算机技术在市政给排水中的应用 [摘要]随着科技的进步与时代的发展,计算机技术在各个领域与行业中得到了广泛应.应用计算机技术可以增加工作的科学性与准确性 ...
计算机基础中怎么评价,浅谈职校计算机基础教学中的教学评价
浅谈职校计算机基础教学中的教学评价在我们具体实施任务驱动法的教学过程中,教学评价是非常重要的环节.教学评价是计算机课 (本文共2页) 阅读全文>> 随着时代的发展,人们对高等教育发展的关 ...
浅谈iPhone和iPad开发中的图标设置
浅谈iPhone和iPad开发中的图标设置图标大小问题我们的辛辛苦苦做出来的应用程序在iPhone上的表示仅仅是一个图标,对这个图标不可以不谨慎对待,不能因为大小不对头这些小问题而失真啊什么的. ...
ajax参数中有加号,浅谈在js传递参数中含加号(+)的处理方式
一般情况下,URL 中的参数应使用 url 编码规则,即把参数字符串中除了 -_. 之外的所有非字母数字字符都将被替换成百分号(%)后跟两位十六进制数,空格则编码为加号(+). 但是对于带有中文的参数 ...
化学实验中计算机技术的应用,浅谈计算机在基础化学实验中的应用
<浅谈计算机在基础化学实验中的应用.doc>由会员分享,可免费在线阅读全文,更多与<浅谈计算机在基础化学实验中的应用>相关文档资源请在帮帮文库(www.woc88.com)数亿 ...
PHP字符串转数字面试,浅谈php字符串反转面试中经常遇到的问题
下面小编就为大家分享一篇浅谈php字符串反转面试中经常遇到的问题,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧 1.单字节字符串反转 php提供了用于字符串反转的函数strrev( ...

浅谈关于quill在vue中的使用

浅谈关于quill在vue中的使用相关推荐

最新文章

热门文章