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

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

1.直接用textarea当编辑器

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

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

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

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

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

text组件 | uni-app官网

相关推荐
猫猫不是喵喵.17 分钟前
Vue2 的 Vuex 状态管理与 Vue3 的 Pinia 状态管理
前端·javascript·vue.js
greenbbLV31 分钟前
中小公司积分商城选型:SaaS与私有化方案对比解析
大数据·前端·小程序
眞bilibili1 小时前
如何快速无缝的从 vscode 转向AI编辑器 cursor、kiro、trae 等
人工智能·vscode·编辑器
NutShell Wang2 小时前
Vite 8.1 深度拆解:Rolldown 统一打包器如何终结前端构建的「双引擎时代」
前端·rust·开源·vite·开发者工具·vibe coding
朱容zr3331332 小时前
请解释“回表”的概念。
java·前端·数据库
软件技术NINI2 小时前
盗墓笔记html+css+js 2页
css·笔记·html
山河不见老2 小时前
【Cursor 、Qoder安装问题】Cursor 、Qoder安装卡在“正在准备安装”问题排查及解决
人工智能·windows·编辑器
leslie1182 小时前
webpack笔记
前端·webpack
宁风NF2 小时前
JavaScript:内存、垃圾回收、性能优化
开发语言·前端·javascript·学习·性能优化·es6
勾勾圈圈蛋蛋2 小时前
DOM、BOM、DOM操作详解 + 结合Vue响应式关联梳理
前端