uniapp 小程序 富文本编辑器

网上找了四五个编辑器,因为用的是uniapp的,还要自己修改,太懒了,所需直接找了兼容uniapp微信小程序的一个插件
插件下载地址
最后的效果是这样的
最终的效果

但是一个小程序要那么多编辑器干嘛我就删了很多 现在是这样
在这里插入图片描述
具体要什么自己删,样式什么自己改下简单的

主要说一下评论里的一个问题如何从后台取出的富文本插入进这里边的编辑里边 回显以及获得编辑器富文本数据

父组件

<comeditor2   @getChild1="getChild1" :Content="Content" ></comeditor2>   //组件引用就不说了
//Content就是后台的富文本数据,getChild1编辑器的富文本数据
	getChild1(e){
		console.log(e);
	
	},
       
子组件
		props: {		  Content: String,},
<editor id="editor" show-img-size :read-only="isEdit" show-img-resize show-img-toolbar class="ql-container"
		@blur="blur"  @input="oninput"	  :placeholder="placeholder" @statuschange="onStatusChange" @ready="onEditorReady">
//照理来说 @ready  定义初始化就可以获得 模拟器上可以实现  但是上线的时候初始化有延迟,渲染时有时无
onEditorReady($event) {
			// console.log(uni.createSelectorQuery().in(this).select('#editor').context)
			// 	let that=this;
			// 	uni.createSelectorQuery().in(that).select('#editor').context(function(res) {		
			// 		that.editorCtx = res.context;			
			// 	console.log('12'	,that.editorCtx);
			
			// 	that.editorCtx.setContents({
			// 		html:that.Content,
					
			// 	})	
	
				// }).exec();
			},

//于是我做了一个watch监听  讲道理(父组件上v-if应该也可以吧)做法和上面相似


//编辑器的内容 传给富文本即可  
 this.editorCtx.getContents({
					success: function(res) {
					
						console.log(res)
						that.$emit("getChild1",res.html);
					}
				});

富文本传给父组件的后,提交需要注意,建议弄个定时器 提交

  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值