qingyuan/components/jin-edit/jin-edit.vue

<template>
	<view class="container" :style="{
		paddingBottom: showMoreTool ? '220rpx' : '120rpx'
	}"> 
		<editor
			class="ql-container"
			:placeholder="placeholder"
			:show-img-size="true"
			:show-img-toolbar="true"
			:show-img-resize="true"
			@ready="onEditorReady"
			id="editor"
			@statuschange="statuschange"
			@focus="editFocus" 
			@blur="editBlur"
			ref="editot"
		></editor>   
		<!-- 操作工具 -->
		<view class="tool-view" > 
			<view class="tool">
				<jinIcon class="single" type="&#xe6f3;" font-size="44rpx" title="插入图片" @click="insertImage"></jinIcon>
				<jinIcon class="single" type="&#xe6f9;" font-size="44rpx" title="修改文字样式" @click="showMore" :color="showMoreTool ? activeColor : '#666666'"></jinIcon>
				<jinIcon class="single" type="&#xe6eb;" font-size="44rpx" title="分割线" @click="insertDivider"></jinIcon>
				<jinIcon class="single" type="&#xe6e8;" font-size="44rpx" title="撤销" @click="undo"></jinIcon>
				<jinIcon class="single" type="&#xe705;" font-size="44rpx" title="重做" @click="redo"></jinIcon>
				<jinIcon class="single" type="&#xeb8a;" font-size="44rpx" title="设置" @click="release(true)"></jinIcon>
			</view>
			<!-- 文字相关操作 -->
			<view class="font-more" :style="{ height: showMoreTool ? '100rpx' : 0 }">
				<jinIcon class="single" type="&#xe6e7;" font-size="44rpx" title="加粗" @click="setBold" :color="showBold ? activeColor : '#666666'"></jinIcon>
				<jinIcon class="single" type="&#xe6fe;" font-size="44rpx" title="斜体" @click="setItalic" :color="showItalic ? activeColor : '#666666'"></jinIcon>
				<jinIcon class="single" type="&#xe6f8;" font-size="44rpx" title="分割线" @click="setIns" :color="showIns ? activeColor : '#666666'"></jinIcon>
				<jinIcon class="single" type="&#xe6e3;" font-size="44rpx" title="标题" @click="setHeader" :color="showHeader ? activeColor : '#666666'"></jinIcon>
				<jinIcon class="single" type="&#xe6f1;" font-size="44rpx" title="居中" @click="setCenter" :color="showCenter ? activeColor : '#666666'"></jinIcon>
				<jinIcon class="single" type="&#xe6ed;" font-size="44rpx" title="居右" @click="setRight" :color="showRight ? activeColor : '#666666'"></jinIcon>
			</view>
			<view class="setting-layer-mask" v-if="showSettingLayer" @click="showSetting"></view>
			<view class="setting-layer" v-if="showSettingLayer">
				<view class="single" @click="release(true)">
					<jinIcon class="icon" type="&#xe639;" ></jinIcon>
					<view>公开发布</view>
				</view>
				<view class="single" @click="release(false)">
					<jinIcon class="icon" type="&#xe655;" ></jinIcon>
					<view>私密保存</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// #ifdef H5
	import wxApi from '@/common/js/wxApi.js';
	// #endif
	import App from "@/common/js/app.js";
import jinIcon from './jin-icons.vue';
export default {
	props: {
		// 点击图片时显示图片大小控件
		showImgSize: {
			type: Boolean,
			default: false
		},
		// 点击图片时显示工具栏控件
		showImgToolbar: {
			type: Boolean,
			default: false
		},
		// 点击图片时显示修改尺寸控件
		showImgResize: {
			type: Boolean,
			default: false
		},
		// 占位符
		placeholder: {
			type: String,
			default: '开始输入...'
		},
		// 图片上传的地址
		uploadFileUrl: {
			type: String,
			default: '#'
		},
		// 上传文件时的name
		fileKeyName: {
			type: String,
			default: 'file'
		},
		// 上传图片时，http请求的header
		header: {
			type: Object
		},
		// 初始化html
		html: {
			type: String
		}
	},
	computed:{
		
	},
	data() {
		return {
			showMoreTool: false,
			showBold: false,
			showItalic: false,
			showIns: false,
			showHeader: false,
			showCenter: false,
			showRight: false,
			showSettingLayer: false,
			activeColor: '#F56C6C'
		};
	},
	components: {
		jinIcon
	},
	created() {
		
	},
	methods: {
		onEditorReady(e) {
			uni.createSelectorQuery()
				.in(this)
				.select('.ql-container')
				.fields({
					size: true,
					context: true
				},res => {
					this.editorCtx = res.context;
					this.editorCtx.setContents({
						html: this.html
					})
				})
				.exec();
		},
		undo() {
			this.editorCtx.undo();
		},
		// 插入图片
		async insertImage() {
			let _this = this;
			// #ifdef H5
			if(App.getClientType() == 2){
					let res = await App.browser_upload(1);
					uni.showLoading();
					let imageUrl = res.tempFilePaths[0],
						rnImageData = App._upLoad(imageUrl);
					rnImageData.then(options => {
						console.log(options, 'options');
						let file = options.data.img;
						_this.editorCtx.insertImage({
							src: file, // 此处需要将图片地址切换成服务器返回的真实图片地址
							alt: '图片',
							success: function(e) {}
						});
						uni.hideLoading();
					});
					return
			}
			wxApi.choseImage(res => {
				wxApi.uoloadIg(res.localIds[0], data => {
					if (data.errMsg === 'uploadImage:ok') {
						uni.showLoading({});
						let requestData = {
							upload_type: 2,
							id: data.serverId
						};
						App._post_form(
							'&do=uploadFiles',
							requestData,
							res => {
								_this.editorCtx.insertImage({
									src: res.data.img, // 此处需要将图片地址切换成服务器返回的真实图片地址
									alt: '图片',
									success: function(e) {}
								});
							},
							false,
							() => {
								uni.hideLoading();
							}
						);
					} else {
						App.showError('上传失败');
					}
				});
			});
			// #endif
			// #ifndef H5
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册选择
				success: function(res) {
					uni.showLoading();
					let imageUrl = res.tempFilePaths[0],
						rnImageData = App._upLoad(imageUrl);
					rnImageData.then(options => {
						console.log(options, 'options');
						let file = options.data.img;
						_this.editorCtx.insertImage({
							src: file, // 此处需要将图片地址切换成服务器返回的真实图片地址
							alt: '图片',
							success: function(e) {}
						});
						uni.hideLoading();
					});
				},
				fail: function(data) {
					if(data.errMsg != 'chooseImage:fail cancel'){
						App.showError('上传失败');
					}
				}
			});
			// #endif
			// uni.chooseImage({
			// 	count: 9, //默认9
			// 	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			// 	sourceType: ['album', 'camera'], //从相册选择
			// 	success: async(res) => {
			// 		var tempFilePaths = res.tempFilePaths;
			// 		uni.showLoading({
			// 			title: '正在上传中...'
			// 		})
			// 		for (let temp of tempFilePaths) {
			// 			// 图片上传服务器
			// 			await uni.uploadFile({
			// 				url: this.uploadFileUrl,
			// 				filePath: temp,
			// 				name: this.fileKeyName,
			// 				header: this.header,
			// 				success: res => {
			// 					// 上传完成后处理
			// 					this.editorCtx.insertImage({
			// 						src: temp,  // 此处需要将图片地址切换成服务器返回的真实图片地址
			// 						alt: '图片',
			// 						success: function(e) {}
			// 					});
			// 					uni.hideLoading()
			// 				},
							
			// 			});
			// 		}
			// 	}
			// });
		},
		insertDivider() {
			this.editorCtx.insertDivider();
		},
		redo() {
			this.editorCtx.redo();
		},
		showMore() {
			this.showMoreTool = !this.showMoreTool;
			this.editorCtx.setContents()
		},
		setBold() {
			this.showBold = !this.showBold;
			this.editorCtx.format('bold');
		},
		setItalic() {
			this.showItalic = !this.showItalic;
			this.editorCtx.format('italic');
		},
		checkStatus(name, detail, obj) {
			if (detail.hasOwnProperty(name)) {
				this[obj] = true;
			} else {
				this[obj] = false;
			}
		},
		statuschange(e) {
			var detail = e.detail;
			this.checkStatus('bold', detail, 'showBold');
			this.checkStatus('italic', detail, 'showItalic');
			this.checkStatus('ins', detail, 'showIns');
			this.checkStatus('header', detail, 'showHeader');
			if (detail.hasOwnProperty('align')) {
				if (detail.align == 'center') {
					this.showCenter = true;
					this.showRight = false;
				} else if (detail.align == 'right') {
					this.showCenter = false;
					this.showRight = true;
				} else {
					this.showCenter = false;
					this.showRight = false;
				}
			} else {
				this.showCenter = false;
				this.showRight = false;
			}
		},
		setIns() {
			this.showIns = !this.showIns;
			this.editorCtx.format('ins');
		},
		setHeader() {
			this.showHeader = !this.showHeader;
			this.editorCtx.format('header', this.showHeader ? 'H2' : false);
		},
		setCenter() {
			this.showCenter = !this.showCenter;
			this.editorCtx.format('align', this.showCenter ? 'center' : false);
		},
		setRight() {
			this.showRight = !this.showRight;
			this.editorCtx.format('align', this.showRight ? 'right' : false);
		},
		showSetting() {
			this.showSettingLayer = !this.showSettingLayer;
		},
		async editFocus() {
			
		},
		editBlur() {
			
		},
		release(isPublic) {
			this.showSettingLayer = false;
			this.editorCtx.getContents({
				success: res => {
					Object.assign(res, {
						isPublic: isPublic
					})
					this.$emit('editOk', res);
				} 
			})
		},
	}
};
</script>

<style scoped>
.container {
	padding: 30rpx 0;
	box-sizing: border-box;
	padding-bottom: 120rpx;
}

.ql-container {
	line-height: 160%;
	font-size: 34rpx;
	width: calc(100% - 60rpx); 
	height: auto;
	margin: 0 auto;
} 
.tool-view{
	width: 80vw;
	position: fixed;
	bottom: 0;
	left: 0;
	
}
.tool {
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	background: #eee;
}

.font-more {
	position: absolute;
	left: 0;
	bottom: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	background: rgb(235, 235, 235);
	overflow: hidden;
	transition: all 0.15s;
}

.setting-layer {
	position: absolute;
	bottom: 100rpx;
	background: #fff;
	width: 250rpx;
	right: 20rpx;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	border-radius: 8rpx;
}
.setting-layer .single {
	height: 80rpx;
	font-size: 32rpx;
	padding: 0 30rpx;
	display: flex;
	align-items: center;
	line-height: 80rpx;
	flex-direction: row;
	color: #666;
}
.setting-layer .single .icon {
	margin-right: 20rpx;
}
.setting-layer-mask{
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background: transparent; 
}
</style>