前言：最近产品提出一个新需求，要文本框的字体部分改变颜色、大小、换行等功能。在了解需求后，文本框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识别不了
最终方案
- 方案一 给盒子添加样式
white-space: pre-wrap;
<div contenteditable="true" id="text" style="white-space: pre-wrap;">
</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>
- 方案二 既然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>
效果如下
搞定~
如果有其它最优解，欢迎留言讨论。
