vue实战023:Vue-Quill-Editor自定义工具栏

自定义工具

Vue-Quill-Editor自带的工具栏还算挺丰富的,但是可能还是无法满足我们的需求,这时我们就需要根据项目自定义功能些功能,比如说想CSDN中的文本编辑有个撤销和重做的的功能,这里我们也来尝试下功能拓展,给Vue-Quill-Editor添加撤销和重做工具。

vue实战023:Vue-Quill-Editor自定义工具栏_第1张图片

 

新增工具样式

首先我们需要添加样式到工具栏中,这里我用最简单的JavaScript来实现,在custom中添加一个新的列表,定义'revoke'和'redo',这样Vue-Quill-Editor会自动生成两个空的且class名为ql-revoke和ql-redo的button按钮,这时我们看不到任何东西,但是toolbar中已经有两个元素标签了,在函数图标后面,可以通过开发者工具查看。

vue实战023:Vue-Quill-Editor自定义工具栏_第2张图片

追加图标, Vue-Quill-Editor里用的是svg图标,这里看个人需求,我用iconfont字体。所以在ql-revoke和ql-redo中分别添加一个i标签的子元素,然后添加class属性,给定图标样式。因为要载入后添加,所以把该操作添加到mounted中去,具体操作如下:

var revoke=document.querySelector('.quill-editor .ql-revoke') //获取元素
var redo=document.querySelector('.quill-editor .ql-redo')
var Front=document.createElement('i')  //创建元素
var after=document.createElement('i')
Front.className="iconfont icon-chexiao" //新增class属性
after.className="iconfont icon-zhongzuo"
revoke.appendChild(Front) //追加到元素中
redo.appendChild(after)

vue实战023:Vue-Quill-Editor自定义工具栏_第3张图片

撤销和撤回功能实现

思路:通过@chang事件监听文本内容变化,新建一个数组来存储变化的值,由于chang监听内容的改变,所以只要文本就更新就会触发chang事件的执行,所以这个过程存储的数据会比较多,为了不过多的存储我们设定个存储长度,当达到指定长度时清除第一条数据再存入最新的一条数据,点击撤销或者撤回按钮时将数组中的数据替换给富文本框。

#HTML


#methods
EditorChange(){
    console.log(this.changeText)
    if(this.changeText.length>=50){ //限制数组长度
        this.changeText.shift() //清除第一条数据
        this.changeText.push(this.content) 
    }else{
        this.changeText.push(this.content) //追加数据
    }
},

接下来我们在文本中输入数据,在console中就可以看到数据再不断的更新,我们可以看到短短几个“这是测试数据”就存储了18条记录,这就是为什么要设定数组长度了,不然不现存机子要炸的。

vue实战023:Vue-Quill-Editor自定义工具栏_第4张图片

然后写点击事件,这里可以直接用JavaScript来定位元素执行click事件即可, 先匹配当前内容位置,找到对应的id,然后通过点击时更换其对应id的值返回给富文本中。

vue实战023:Vue-Quill-Editor自定义工具栏_第5张图片

遇到的问题:

 这里遇到个问题,那就是在执行点击事件的时候由于内容发生了变化触发了chang事件,这样在修改的时候原数据也在不断的刷新,导致撤销不完全。本来想移除监听事件来着的可是失败了:window.removeEventListener("change",this.EditorChange(),false);,有知道的大神指定下咯,不过这功能没什么用,系统本身就支持撤回和撤销功能,这只是个大概的逻辑后面有空可以继续研究下

vue实战023:Vue-Quill-Editor自定义工具栏_第6张图片

 欢迎关注本人的公众号:编程手札,文章也会在公众号更新

你可能感兴趣的:(前端框架vue)