猿问

textarea内容怎样输入就怎样展示,类似微博?

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

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

展示就是按它编辑是怎样的就是怎样展示,如下图:

https://img.mukewang.com/5c82097700012a4804200331.jpg

求解,在此谢过。

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

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

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

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


烙印99
浏览 499回答 2
2回答

qq_遁去的一_1

你所描述的这种效果 实现方案/1 也就是所谓的换行 微博这种 猜测 可能说你进行换行 或者空格等等一系列操作 他可能加入/n 或者&nbsp这一些换行还是空格符存在数据库 然后在发布的时候按格式把数据渲染出来2 还有就是用输入的时候 你可以把他的文本格式 对应标签去渲染,然后把你这些数据 已字符串存到数据库,然后第二次调取数据 字符串转换 按标签元素的格式去渲染所谓的格式简单叙述俩种实现方案!

拉丁的传说

你那数据拿到的时候是有n么,我之前也是遇到过,可以这样:text=text.replace(/[\r\n]/g,"<br/>");
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答