uniapp中使用编辑器editor

1.需求：

开发小程序时，想要在手机上添加编辑内容，使用u–textarea时，换行操作不显示，为此使用了uniapp自带的组件editor来实现：

2.使用：

<template>
	<view class="">
		
		<editor id="editor" class="ql-container m-ql-container" placeholder="请输入活动地址和详细的活动介绍..."
				@ready="onEditorReady" @input="getEditorContent">
		editor>
	view>
template>

<script>
	export default {
		data() {
			return {
				content: '',
			}
		},
	
		methods: {
			//1.初始化编辑器
			onEditorReady() { 
				//将content是从后台获取的字符串，将字符串转化为delta对象
				setTimeout(() => {
					var htmls = this.content
					console.log(htmls)
					if (htmls) {
						let contents = JSON.stringify(htmls)
						console.log(contents)
						uni.createSelectorQuery().select('#editor').context((res) => {
							console.log(res);
							let con = res.context
							con.setContents({
								html: htmls,
								delta: contents
							})
						}).exec()
					} else {
						return
					}
				}, 500)
			},
			//2.获取编辑器内容，当前页面都能获取到
			getEditorContent(e) { 
				this.content = e.detail.html;
			},
			
		}
	}
script>

<style scoped>
	#editor {
		width: 100%;
		height: 300px;
		margin-top:10px;
	}
style>

具体可参考官网：https://uniapp.dcloud.net.cn/component/editor.html

完成！