简单公告功能的小技巧--textarea编辑后自动换行展示

 

 

需求：

　　　　实现一个简单的公告发布功能，能实现发布简单公告并在展示时能够换行。

 

思路：

　　　　1、由于只是显示简单的公告发布功能，不需要引入额外的富文本编辑插件，所以直接使用textarea标签来实现，但是在textarea中编辑的时候，换行后直接显示在页面是不会换行的，因为浏览器不会识别"\n"为换行，只是简单的表现为空格的效果。

　　　　2、所以保存到数据库的时候换行应该存储为“<br />”这种格式，而在编辑的时候改成“\n”这种格式。

　　　　3、只要在编辑的时候替换textarea框中的“<br />”为“\n”,在保存的时候替换“\n”字符为“<br />”即可实现。

 

代码：

　　　　在编辑页面公告的数据结构：

/**这是vue中的data数据定义**/
data () {
    title: '', // 公告的标题
    content: '' // 公告的内容
}

　　　　在编辑页面获取公告内容时的处理：　　　　　　　

/**代码片段，其中result是从接口获取到的数据**/
if (result && result.retCode === 0) {
    this.title = result.title;
    this.content = result.content.replace(/<br\/>/g, `\n`,);
}

　　　　 在编辑页面保存公告内容时的处理：

/**代码片段，params是保存时提交的数据**/
const params = {
    title: this.title,
    content: this.content.replace(/\n/g, `<br/>`)
};

　　　　

实现的效果：

　　　　页面展示效果：

　　　　　　　　　　　　

 

 

 

 

　　　　编辑时的效果：