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

完成!

相关推荐
web行路人5 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂27 分钟前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石36 分钟前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程37 分钟前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫1 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
Justinc.1 小时前
CSS3新增边框属性(五)
前端·css·css3
neter.asia2 小时前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫2 小时前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
嚣张农民2 小时前
JavaScript中Promise分别有哪些函数?
前端·javascript·面试