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

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

1.直接用textarea当编辑器

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

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

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

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

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

text组件 | uni-app官网

相关推荐
是席木木啊5 小时前
告别console.log!Vue3项目日志框架选型指南
前端·vue3·日志框架
凰轮5 小时前
TypeScript 知识点总结
前端·javascript·typescript
英俊潇洒美少年5 小时前
告别大请求卡顿!原生 CompressionStream 实现 axios 请求体自动 Gzip 压缩(前后端全适配)
前端
|晴 天|5 小时前
Element Plus 组件库实战技巧与踩坑记录
前端·javascript·vue.js·typescript
Codiggerworld5 小时前
Vim的语法:删除、复制、粘贴,像说话一样自然
编辑器·vim·excel
im_AMBER5 小时前
从面试题看JS变量提升
开发语言·前端·javascript·前端框架
Mintopia5 小时前
不用学微服务,也能设计不崩的系统:最小可行思路
前端
llf_cloud5 小时前
Vue2 项目中的全局自动弹窗队列设计
前端·javascript·vue.js
刘延林.5 小时前
Visual Studio Code+PlatformIO + ESP32-S3 + Arduino 框架点亮一个小的led灯-测试
ide·vscode·编辑器
百锦再5 小时前
使用JavaScript获取和解析页面内容的完整指南
开发语言·前端·javascript·python·flask·fastapi