textarea内容怎样输入就怎样展示，类似微博？

Question

遇到了一个需求，自己不知道该怎么办，使用移动端富文本编辑器虽然能排版，但是达不到想要的效果而且又及其不好用，我想要的效果如下：

比如编辑时我是这样编辑的：

展示就是按它编辑是怎样的就是怎样展示，如下图：

求解，在此谢过。

最终选择办法：
在提交参数时保留回车符

ActDetail=ActDetail.replace(/[\r\n]/g,"<br/>");//保留回车符

展示内容时按html格式输出，css代码添加一个white-space: pre-wrap;属性保存空白，例如我这边是用vue做的：

<div class="content" v-html="data.content"></div>

Answer 1

谢邀/
你所描述的这种效果 实现方案/
1 也就是所谓的换行 微博这种 猜测 可能说你进行换行 或者空格等等一系列操作 他可能加入/n 或者&nbsp这一些换行还是空格符存在数据库 然后在发布的时候按格式把数据渲染出来

2 还有就是用输入的时候 你可以把他的文本格式 对应标签去渲染,然后把你这些数据 已字符串存到数据库，然后第二次调取数据 字符串转换 按标签元素的格式去渲染所谓的格式

简单叙述俩种实现方案！

Answer 2

中间保存个换行不就可以了吗?

Answer 3

你那数据拿到的时候是有n么，我之前也是遇到过，可以这样：

text=text.replace(/[\r\n]/g,"<br/>");

Answer 4

pre标签就行了