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

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

给定字符串

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

要实现的效果

方案一

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

<div contenteditable="true" id="text">
</div>

<script>
let text = '这是一段正常的文字\r\n这是换行（<font color="red">这是提示的红色</font>）\r\n这段文字为可编辑状态';
let dom = document.getElementById('text');
dom.innerHTML= text;
// 当编辑完成后 在取得div的内容就可以了
let resultText = document.getElementById('text').innerHTML;
console.log(resultText);
</script>

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

最终方案

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

<pre contenteditable="true" id="text">
</pre>

<script>
let text = '这是一段正常的文字\r\n这是换行（<font color="red">这是提示的红色</font>）\r\n这段文字为可编辑状态';
let dom = document.getElementById('text');
dom.innerHTML= text;
// 当编辑完成后 在取得div的内容就可以了
let resultText = document.getElementById('text').innerHTML;
console.log(resultText);
</script>

效果如下

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