实现简单的富文本编辑器
给元素添加contenteditable属性，元素内部会变成可编辑状态。负责html文本进去会直接渲染。通过innerHTML属性可以拿到富文本源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div contenteditable="true" id="odiv">
<span>每列的末尾可能不够友好，可能出现有些列会很长，有些又会很短。</span>
<p>从第二行开始，每张图片都放到最短的一列下面。然后增加此列高度，此时列的高度发生变化，下张图片又会寻找其他最短的列。以此持续计算下去。</p>
</div>
<script>
console.log(document.querySelector('#odiv').innerHTML)
</script>
</body>
</html>