<template>
		<div class="content">
			<div class='toolbar' @tap="format">
				<div :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold"></div>
				<div :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic"></div>
				<div :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline"></div>
				<div :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" data-name="strike"></div>
				<div :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi" data-name="align"
				 data-value="left"></div>
				<div :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi" data-name="align"
				 data-value="center"></div>
		
				<div class="iconfont icon-fengexian" @tap="insertdivider"></div>
				<div class="iconfont icon-charutupian" @tap="insertimage"></div>
			</div>
			<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="oneditorready" @statuschange="onstatuschange"></editor>
		</div>
</template>

<script>
	export default {
		data() {
			return {
				placeholder: '开始输入...'
			}
		},
		methods: {
			//撤销、重做这些不需要可以不写
				undo() {
					this.editorCtx.undo()
				},
				
				redo() {
					this.editorCtx.redo()
				},
				
				format(e) {
					let {
						name,
						value
					} = e.target.dataset
					if (!name) return
					// console.log('format', name, value)
					this.editorCtx.format(name, value)
				},
				
				oneditorready() {
					uni.createSelectorQuery().select('#editor').context((res) => {
						this.editorCtx = res.context
					}).exec()
				},
				
			insertImage() {
				var that = this;
				uni.chooseImage({ 
					sizeType: ['original', 'compressed'], 
					sourceType: ['album', 'camera'], 
					success(res) { 
						console.log(res.tempFilePaths[0])
						uni.uploadFile({   
							url: 'http://0.0.0.0/file/upload-img', //域名+上传文件的请求接口 (根据你实际的接口来)       
							filePath: res.tempFilePaths[0], // tempFilePath可以作为img标签的src属性显示图片 服务器图片的路径         
							name: 'img', //上传到服务器的参数，自定义
							header: {
								"Content-Type": "multipart/form-data"
							},          
							success(res) {
								var data = JSON.parse(res.data)
								that.editorCtx.insertImage({
									width: '100%', //设置宽度为100%防止宽度溢出手机屏幕
									height: 'auto',
									src: data.url, //服务端返回的url
									alt: '图像',
									success: function() {
										console.log('insert image success')
									}
								})
								console.log(that.editorCtx)
							}
						})
					}
				})
			},
		}
	}
</script>

<style>
	.ql-container {
		box-sizing: border-box;
		padding: 12px 15px;
		width: 100%;
		min-height: 30vh;
		height: auto;
		background: #fff;
		font-size: 16px;
		line-height: 1.5;
	}
	
	.ql-active {
		color: #06c;
	}
	
	.iconfont {
			display: inline-block;
			padding: 8px 8px;
			width: 24px;
			height: 24px;
			cursor: pointer;
			font-size: 20px;
	}
		
	.toolbar {
		box-sizing: border-box;
		border-bottom: 0;
		font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	}
</style>
