tinymce vue2中进行上下标的使用以及遇到问题的解决思路

118 阅读1分钟

开门见山

最后的成品长酱紫~

image.png

开发祖传项目时发现使用tinymce 插件,看了官网看了网上demo,很快就入手。nice~,随后的需求改变后引发了以下问题:

  • (2)输入内容正常,但是光标一直位于最前端
  • (1)传给业务的数据开头结尾去除p标签,并保留内部上下标
  • (3)根据业务返回返显数据
  • (4)复制内容去除样式

敲!敲!敲!百度!百度!

作为CV工程师开始进行专业的CV

解决它

首先tinymce插件正常使用条件下,

先解决问题(4)复制内容去除样式

去除复制内容的样式很简单,就是字符串通过正则 /<(?!/?(sub|sup)>)[^>]+>/g 去除标签,因为只需要上下标,所以保留sub sup标签,其余替换为空

解决问题(3)根据业务返回返显数据 和问题(2)输入内容正常,但是光标一直位于最前端

因为传过去的是只有sub sup标签的,其余的标签都没有,所以当我们拿到业务返回的数据时,要头尾手动添加P标签,这样``` '<p>' + value + '</p>'就解决了,最后才发现,问题(2)问题就是业务返回的字段是进过我们加工后的,但是不符合tinymce插件的数据格式,通过次方法可完美解决 解决问题(1)传给业务的数据开头结尾去除p标签,并保留内部上下标 通过上面的技巧,此问题就不是问题了

摸鱼!摸鱼!坐等下班

问题解决,头发保住了,nice~