uin-app 富文本编辑器 editor

直接上代码

<template>
	<view class="content">
		
		<view class="dis-tan biaoqian">
			<text @tap = "blod(1)">加粗</text>
			<text @tap = "blod(2)">平常</text>
			<text @tap = "biaoti(1)">大标题</text>
			<text @tap = "biaoti(2)">次标题</text>
			<text @tap = "biaoti(3)">小标题</text>
			<text @tap = "imgss">图片</text>
			<text @tap = "undo">撤销</text>
			<text @tap = "store">保存</text>
			<text @tap = "insertDivider">下滑线</text>
			<text @tap = "align(1)">居中</text>
			<text @tap = "align(0)">居左</text>
			<text @tap = "align(2)">居右</text>
			<text @tap = "paddings(1)">距左</text>
			<text @tap = "paddings(2)">距右</text>
			<text @tap = "paddings(3)">距上</text>
			<text @tap = "paddings(4)">距下</text>
			<text @tap = "open">文字颜色</text>
			<text @tap = "clear">清空</text>
			
		</view>
		
		        <!-- 需要声明 ref  -->
		        <t-color-picker ref="colorPicker" :color="color" @confirm="confirm"></t-color-picker>
		
		<view class="shuru dis-tan">
			<text>自定义边距</text>
			<input type="number" class="zi-zhong" v-model="val" />
		</view>
		<editor 
		id="editor" 
		class="ql-container"
		:placeholder="placeholder"
		@ready="onEditorReady"></editor>
	
	
		<!-- <view v-if="ss" v-html="ss"></view> -->
		 <rich-text :nodes="ss"></rich-text>
			
	</view>
</template>

<script>
	//挑选文字颜色的组件
	  import tColorPicker from '@/components/t-color-picker/t-color-picker.vue'
	export default {
		components:{
			tColorPicker
		},
		data() {
			return {
				placeholder: '开始输入...',
				ss:'',
				val:5,
				edits:[
					{
						type: "textarea",
						value: "文字",
					}
				],
				color:{r: 51,g: 51,b: 51,a: 1},
				colordd:'#333',
			}
		},
		
		mounted(){
		    this.$nextTick(()=>{ // 页面渲染完成后的回调
			})
		},
		onLoad(option) {
			
		},
		methods:{
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
					console.log(res)
				}).exec()
			},
			
			
			open(item) {
				console.log(item)
				// 打开颜色选择器
				this.$refs.colorPicker.open();
			},
			confirm(e) {
				this.colordd = e.hex;
				this.editorCtx.format('color', this.colordd)
			},
			blod(e){
				switch(e){
					case 1:
					this.editorCtx.format('bold', '800')
					break;
					case 2:
					this.editorCtx.format('bold', '200');
					break;
				}
			},
			biaoti(e){
				
				switch(e){
					case 1:
					this.editorCtx.format('header', 'H1')
					break;
					case 2:
					this.editorCtx.format('header', 'H2');
					break;
					case 3:
					this.editorCtx.format('header', 'H3');
					break;
				}
				
			},
			imgss(){
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					//sourceType: ['album'], //从相册选择
					success: res => {
						console.log(res)
						let img = {
							src:res.tempFilePaths[0],
							width:'100%',
							extClass:'imdd'
						}
						this.editorCtx.insertImage(img)
						// that.$updateFile('merchant/User/updateBackground',res.tempFilePaths[0], function(res) {
						// 	console.log(res)
						// 	if (res.code == 1001) {
						// 		that.cropFilePath = res.data.background_img;
						// 	}
						// });
						// this.tempFilePath = res.tempFilePaths.shift();
					}
				});
			},
			undo() {
				this.editorCtx.undo()
			},
			insertDivider() {
				this.editorCtx.insertDivider({
					success: function() {
					}
				});
			},
			
			align(e){
				switch(e){
					case 0:
					this.editorCtx.format('align', 'left');
					break;
					case 1:
					this.editorCtx.format('align', 'center');
					break;
					case 2:
					this.editorCtx.format('align', 'right');
					break;
				}
			},
			
			
			store(e) {
				let that = this;
				this.editorCtx.getContents({
					success: function(res) {
						that.ss = res.html;
						console.log(res)
						// e.currentTarget.id == 1 ? console.log('保存内容:', res.html) : uni.navigateTo({
						// 	url: `../preview/preview?rich=${encodeURIComponent(res.html)}`
						// });
					}
				});
			},
			paddings(e){
				let val = this.val+'px'
				switch(e){
					case 1:
					this.editorCtx.format('paddingLeft', val)
					break;
					case 2:
					this.editorCtx.format('paddingRight', val);
					break;
					case 3:
					this.editorCtx.format('paddingTop', val);
					break;
					case 4:
					this.editorCtx.format('paddingBottom', val);
					break;
					
				}
			},
			clear(){
				this.editorCtx.clear({});
			}
		}
	}
</script>

<style>
	 .shuru{
		 background-color: #FFFFFF;
		 padding: 24rpx;
	 }
	 .shuru input{
		 margin-left: 30rpx;
		 border-radius: 20rpx;
		 text-align: center;
		 width: 80rpx;
		 height: 60rpx;
		 border: 1rpx solid #999999;
	 }
	
	    #editor {
			margin-top: 50px;
	        padding: 0 24rpx;
	        height: 300px;
	        background-color: #FFFFFF;
	    }
		.biaoqian{
			padding: 20rpx 24rpx;
			flex-wrap: wrap;
		}
		.biaoqian text{
			padding: 5rpx 20rpx;
			border-radius: 1000px;
			background-color: #1875FF;
			color: #FFFFFF;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}
	
	    button {
	        margin-top: 10px;
	    }
		/* #ifdef MP-WEIXIN */
		/* 小程序直接就可以使用 没在真机上调试 */
		.imdd{
			display: block;
			padding: 20px;
		}
		/* #endif */
		/* #ifdef H5 */
		/* 只有加上/deep/才可以在h5上使图片的class能使用 */
		/deep/img{
			display: block;
			padding: 20px;
			width: calc(100% - 40px);
		}
		/* #endif */
		
</style>