利用textarea和white-space实现最简单的文章编辑器 支持缩进和换行
当你遇到一个非常基础的文章发布和展示的需求,只需要保留换行和空格缩进,你是否会犹豫要使用富文本编辑器?实际上这个用原生的标签两步就能搞定!
1.直接用textarea当编辑器
textarea本身就可以保存空格和换行符,示例如下:
2.给展示的区域设置white-space: pre-wrap;
这是css3新增的属性,可以保留连续的空格和换行符。相似的还有个pre-line,也能保留换行符,但是会合并连续空格为一个,这里为了保留原文的缩进,因此用pre-wrap更合适。
另外如果是小程序开发可以直接用<text>标签,不用设置white-space。
是否显示连续空格和空格的字符大小都是可配置的。详见uniapp文档:
text组件 | uni-app官网