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

完成!

相关推荐
小白变怪兽20 分钟前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头23 分钟前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全1 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing1 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆1 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding2 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机3 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人3 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
翻滚吧键盘4 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
秃了也弱了。4 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome