uniapp中使用编辑器editor

1.需求:

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

2.使用:

html 复制代码
<template>
	<view class="">
		<!-- <u--textarea v-model="content" placeholder="请输入活动地址..." maxlength='-1'></u--textarea> -->
		<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

完成!

相关推荐
醉の虾21 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧30 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm39 分钟前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
gqkmiss2 小时前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃2 小时前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰2 小时前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter