解决contenteditable内自动生成font标签问题

问题描述：
div设置了contenteditable之后，如果里面存在代码块，且有背景颜色，那么在刚删除此带背景颜色区域的时候，立刻输入文本，新输入的文本也会默认带着颜色（想要的效果是新输入的文本不带任何样式），通过F12查看发现生成了font标签，且继承了刚才删除的代码块的背景色。

将上面“这是主诉的值“删除，删除后紧接着输入新文本“这是新输入的值，应该是纯文本的“

通过上面发现，删除带有颜色的值之后，新输入的文本也默认带了颜色，F12查看自动生成了font标签，还带了内联样式
需要解决原因：
我们的业务需要严格控制可编辑的div里保存的内容，不允许出现其他标签，防止扰乱业务，所以出现此问题就必须得去解决。
尝试解决
有网友回答不要在contenteditable里写内联样式的代码，但我项目中并没有内联样式，只是一个class，在外部控制背景色的，所以此方法不行。
最终解决方案(Vue)
思路：用键盘弹起事件监听是否生成了font标签，一旦生成，立刻扼杀。将刚输入的值插入到font元素之前，然后删除font标签的dom结构
1.给可编辑的元素添加onkeyup事件，如@keyup=“amend()”
2.methods中：

// 修正输入
amend () {if ($('.editableDiv font').length > 0) {$('.editableDiv font').before($('.editableDiv font').text())$('.editableDiv font').remove()}
}

在font生成的瞬间，将它扼杀在摇篮里。

解决contenteditable内自动生成font标签问题相关推荐

umeditor 解析html字符,百度ueditor(UMeditor)编辑器黏贴复制记事本文本自动生成p标签的问题...
百度ueditor(UMeditor)编辑器黏贴复制记事本文本自动生成p标签的问题我们在用百度编辑器复制记事本里面的文章,如果文章里面包含\n转义符号时,百度ueditor会自动给加上P表情,造成文 ...
解决IDEA中自动生成返回值带final修饰的问题
解决IDEA中自动生成返回值带final修饰的问题参考文章: (1)解决IDEA中自动生成返回值带final修饰的问题 (2)https://www.cnblogs.com/andrew-303/p ...
html5怎么自动生成meta标签,html中meta标签该如何使用
为什么需要使用标签? 在我们制作的网页中,要是想让它能够让更多的人去访问,最好的方法就是通过搜索引擎来找到你的网址,于是需要你的网页可以有关键词能够让搜索引擎来识别,于是HTML中的标签就是这个功能, ...
用 Python 一键批量自动生成合同
图片来源于网络文/毅种循环 ♚ 毅种循环,撸python和撸柯基,一个都不能少. 本文作者已加入Python中文社区专栏作者计划一.背景工作中经常会需要做大量的合同,不复杂,也就是在合同模板里 ...
vim 插件_Vim自动生成tags插件vim-gutentag使用方法
在常规的使用ctags生成tag标签文件实现跳转的方式下,每次需要更新tags文件时都需要手工运行 ctags -R 生成当前项目所有源文件对应的tag标签文件. 当工程文件多.文件更新频繁时,上述生 ...
Eclipse用法和技巧十三：自动生成的TODO注释1
使用eclipse的快捷键自动生成的代码,经常有这样的注释. 一眼看上去这个注释和一般的注释并无什么差别,不过TODO这个字符串的颜色不一样,应该有些内容.TODO是eclipse中提供的一种任务标签 ...
迅雷自动生成的vod_cache_data处理方法
本文转载自: https://www.cnblogs.com/cm186man/archive/2008/01/26/1054200.html 作者:cm186man 转载请注明该声明. 最近D盘根目 ...
GPT-3+DALL-E 2 = 海量带标签数据自动生成？
文章来源:新智元 https://mp.weixin.qq.com/s/1A3dzES_TSIQqUG1fr32_g 导读没有优质数据,再强大的模型也无法发挥作用.最近有研究人员发现,GPT-3+D ...
bootstrap自动生成html,Bootstrap框架动态生成Web页面文章内目录的方法
引言在写博客的时候,为了条理性起见,经常会使用许多小标题,当文章长时,需要来回在不同的标题之间穿梭,如果手动添加目录,添加锚点,实在是麻烦,为此,可以动态生成一块目录区域,并使用Bootstrap提供 ...
Flowable6.8(6.x版本通用)整合集成达梦8数据库(DM8)详解，解决自动生成表时dmn相关表语法报错问题。
Flowable集成达梦8数据库相信大部分人都和我一样,以为只要换个数据源就可以了,起初我只更换了数据源,并开启了自动创建表功能. spring:datasource:url: jdbc:dm:// ...

解决contenteditable内自动生成font标签问题

解决contenteditable内自动生成font标签问题相关推荐

最新文章

热门文章