菜鸟篇-公告显示以及后端上传公告

好久没写了，越学习越觉得自己菜。

废话不多说了，上自己遇到的问题，做个记录记录自己的菜。

因为公司业务要求，要在H5页面弹出个公告窗，之前没有试过，就硬着头皮查资料了解怎么弄。

首先可以找一下出现的弹窗特效，网上很多。这里我在https://www.17sucai.com/preview/1/2014-12-22/DialogEffects/sally.html上面随便找了个对话窗，然后就是CSS的修修改改过程，加上背景图，以及textarea文本框。

这里提一下隐藏掉文本框的CSS代码：

.cont {
    width:100%;
    height:77%;
    background:transparent;
    border-style:none;
    overflow:auto;
    top: 3.5rem;
    position: relative;
    color:black;
}
.cont::-webkit-scrollbar {
    display: none;
}

<textarea class='cont' >公告内容</textarea>

之后弄成的效果大致如右图：（假装内容空白）

这时候往里面填加内容，在往里面添加内容的时候，发现文本不会换行显示，使用<br>，\n等换行符号也没有用。最后发现使用&#xd;在textarea上面可以正确显示。

由于不可能每次都到数据库去操作公告的修改，故需要个接口上传公告内容以及保存到数据库去。能正常显示的textarea文本框上传到服务端后再取出来会导致html代码的错乱，从而导致某些按键失效。检查控制台发现是换行符的问题，于是要对上传的公告进行处理，对比发现，textarea上传到服务端的内容是带有\n和\r，这些在前端输出的时候会自动换行，为了不影响前端代码，所以需要把这些换成&#xd;

后端用的是PHP语言，所以很简单就一句话能解决

str_replace("\r\n", "
", $_POST['XXX']); 

把上传内容里面的换行都转成&#xd;就可以解决问题了