uniapp微信小程序富文本编辑器组件

oil欧哟

于 2021-09-04 14:57:12 发布

阅读量1.4k

点赞数 1

分类专栏：微信小程序 uniapp Vue 文章标签：小程序微信 javascript

本文链接：https://blog.csdn.net/weixin_47077674/article/details/120097415

版权

微信小程序同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

Vue

9 篇文章 2 订阅

订阅专栏

uniapp

1 篇文章 0 订阅

订阅专栏

前言

最近需要实现一个微信小程序的富文本编辑器，由于使用的是uniapp框架开发的小程序，因此就改造了一下微信小程序官方案例，并封装成了一个组件。

uniapp-editor gitee仓库

实现效果

在这里插入图片描述

使用方式

在需要使用富文本的页面引入组件，通过v-model绑定富文本内容即可

// example.vue
<template>
	<view>
		<rich-text-editor v-model="richText"></rich-text-editor>
	</view>
</template>

<script>
	import RichTextEditor from "@/components/RichText/RichTextEditor.vue"
	export default {
		components:{
			RichTextEditor
		},
		data() {
			return {
				richText:'这里是初始内容'
			};
		},
		watch:{
			richText(){
				console.log(this.richText)
			}
		}
	}
</script>

<style lang="scss">

</style>