uniapp textarea编辑保留空格换行

rich-text | 微信开放文档

 实现：

textFormat(val) {
			// 格式化文字展示文本域格式文字
			if (val) {
				console.log(val)
				let newString = val.replace(/\n/g, '_@').replace(/\r/g, '_#');
				newString = newString.replace(/_#_@/g, '<br/>'); // IE7-8
				newString = newString.replace(/_@/g, '<br/>'); // IE9、FF、chrome
				newString = newString.replace(/\s/g, '&nbsp;'); // 空格处理
				return newString;
			}
		},

 示例：

<template>
	<view class="u-p-b-30">
		<view class="cu-card article" :class="isCard ? 'no-card' : ''">
			<view class="cu-item shadow" v-for="(item, index) in job_list" :key="index" @click="todetail(item.id)">
				<view class="title">
					<view class="">{{ item.name }}</view>
				</view>
				<view class="content">
					<view class="desc">
						<view class="text-content line-4-hidden" >
							<rich-text :nodes="item.desc" space='emsp'></rich-text>
						</view>
						<view class="flex justify-end mt-10 flex-center">
							<u-icon name="clock" size="38"></u-icon>
							<text class="bg-white">{{item.openedDate}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<add-icon @toAddPage="toAddPage"></add-icon>
		<view class=" ptb-10"><u-loadmore :status="loadStatus" /></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			modalName: null,
			title: 'Hello',
			job_list: [],
			loadStatus: 'loading',
			isCard: false,
			isNoMore: true
		};
	},
	onLoad() {},
	onShow() {
		getApp().reqLogin(() => {
			uni.hideLoading();
			this.getIndex();
		});
	},
	methods: {
		handelTextMore(index) {
			this.job_list[index].isNoMore = !this.job_list[index].isNoMore;
		},
		getIndex() {
			this.request.reqIndex().then(res => {
				this.loadStatus = 'nomore';
				console.log(res);
				if (res.status == 10001) {
					uni.redirectTo({
						url: '/pages/login/open'
					});
				}
				const list = res.data.job_list;

				list.forEach(item => {
					item.isNoMore = true;
					item.openedDate = item.openedDate.substr(0, 10);
					item.desc = this.textFormat(item.desc);
				});
				this.job_list = list;
			});
		},
		textFormat(val) {
			// 格式化文字展示文本域格式文字
			if (val) {
				console.log(val)
				let newString = val.replace(/\n/g, '_@').replace(/\r/g, '_#');
				newString = newString.replace(/_#_@/g, '<br/>'); // IE7-8
				newString = newString.replace(/_@/g, '<br/>'); // IE9、FF、chrome
				newString = newString.replace(/\s/g, '&nbsp;'); // 空格处理
				return newString;
			}
		},
		todetail(id){
			uni.navigateTo({
				url:'/pages/index/detail/detail?id='+id
			})
		},
		toSub() {
			console.log('触发');
			uni.navigateTo({
				url: '/pages/index/add/add'
			});
		},

	
		toAddPage() {
			uni.navigateTo({
				url: '/pages/index/add/add'
			});
		}
	}
};
</script>

<style lang="scss">
.see-more {
	justify-content: center;
	font-size: 28rpx;
	position: relative;
	.iconfont {
		font-size: 26rpx;
	}
}
.cu-card.article > .cu-item .title {
	line-height: 1.5;
	padding: 0 20rpx !important;
}
.text-content {
	margin-top: 20rpx;
	line-height: 1.3 !important;
	color: #666 !important;
}
.cu-card > .cu-item {
	margin: 20rpx !important;
	padding-top: 20rpx;
}
.cu-card.article > .cu-item .content .text-content {
	height: auto !important;
}
.cu-card.article > .cu-item {
	padding-bottom: 0rpx !important;
}
.cu-card.article > .cu-item .content {
	padding: 20rpx !important;
	padding-top: 0rpx !important;
}
</style>