利用textarea和white-space实现最简单的文章编辑器 支持缩进和换行

当你遇到一个非常基础的文章发布和展示的需求,只需要保留换行和空格缩进,你是否会犹豫要使用富文本编辑器?实际上这个用原生的标签两步就能搞定!

1.直接用textarea当编辑器

textarea本身就可以保存空格和换行符,示例如下:

2.给展示的区域设置white-space: pre-wrap;

这是css3新增的属性,可以保留连续的空格和换行符。相似的还有个pre-line,也能保留换行符,但是会合并连续空格为一个,这里为了保留原文的缩进,因此用pre-wrap更合适。

另外如果是小程序开发可以直接用<text>标签,不用设置white-space。

是否显示连续空格和空格的字符大小都是可配置的。详见uniapp文档:

text组件 | uni-app官网

相关推荐
anOnion4 小时前
构建无障碍组件之Menu Button pattern
前端·html·交互设计
用户47949283569155 小时前
claude Fable用不了?把Gpt 5.5pro接到你的claude code里
前端·后端
zhangxingchao7 小时前
Kotlin常用的Flow 操作符整理
前端
IT_陈寒9 小时前
React的useState居然还有这种坑?我差点删库跑路
前端·人工智能·后端
Pedantic10 小时前
SwiftUI 手势笔记
前端·后端
橙子家10 小时前
浏览器缓存之【结构化数据库与缓存】: IndexedDB、Cache storage 和 Storage buckets
前端
user205855615181310 小时前
X6 中边悬浮置顶,规避 `mouseleave` 事件丢失问题
前端
李明卫杭州10 小时前
CSS aspect-ratio 属性完全指南
前端
Pedantic12 小时前
SwiftUI 手势层级(Gesture Hierarchy)详解
前端