实现文本框内,部分字体颜色、字号等自定义

前言：最近产品提出一个新需求，要文本框的字体部分改变颜色、大小、换行等功能。在了解需求后，文本框input发现完全满足不了现需求，于是寻求其它解决方案。

给定字符串

    let text = '这是一段正常的文字\r\n这是换行（这是提示的红色）\r\n这段文字为可编辑状态'

要实现的效果

方案一

• 当发现文本框满足不了需求时，我第一感觉时不想麻烦，虽然把每一段内容拆成单独的input标签也可实现但是工作量太大，太过麻烦。我的思路是利用盒子的属性contenteditable直接将内容丢进div。

但是这样有一点满足不了，text文本中的\r\n识别不了

最终方案

• 既然div识别不了\r\n那就换个能识别的标签，完美解决。

效果如下

完成任务~
如果有其它最优解，欢迎留言指教。