有时候我们需要在文本域实现简单的样式。
比如我们在填写文本域的时候添加了回车和空格,但是存储到数据库再显示到页面标签上的时候,回车不复存在,空格多个只剩一个。
而在这些地方使用富文本编辑器又显得没有必要,那么怎么简单的实现这些样式的存储与显示呢。
先说回车。我们在文本域输入内容的时候有时候需要分几段,但是在存储的时候我们进行单步调试发现,填入的回车在数据里是有显示的,但是在存入数据库再显示到页面上之后就没有了。
也确实我们在数据库存储回车是没有存储的,这里最简单的方式是我们添加<br>标签。当然在取出来显示到页面上的时候需要让显示的内容支持html即可了,angular2的是使用[innerHtml]属性。
这是在存储之前,我们只需要把回车替换为<br>即可。
text.replace(/\n/g,'<br>')
这时候我们把<br>存储到数据库,取出来就有回车了。
空格呢,很多地方有多个空格我们怎么实现呢,很容易想到pre。
实际上在存储的时候我们的多个空格是正常存储的,只是显示的时候html默认多个空格显示一个而已。
实际css有个属性可以规定空格的显示方式
white-space
我们来看这个属性可能的值和描述
normal 默认值。 空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的pre标签
nowrap文本不会换行,文本会在在同一行上继续,直到遇到<br>标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值
这里就不一一试验了。我们这里使用pre-wrap,也就是空格正常显示,换行我们当然上面的<br>控制了。
如果使用pre那么不会换行,内容都会在一行显示,也就是换行还是需要正常的
综合上面2个,我们可以简单的实现在文本域存储和显示简单的空格和样式。
cnpm的使用
说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事。来自官网:“这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”
安装:命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org
注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误
注:cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm。
gulp自动刷新
livereload和webserver