RRDJ_APP/uniapp/components/fa-markdown/fa-markdown.vue

<template>
	<view style="width: 100%;">
		<view>
			<view class="toolbar">
				<!-- 加粗 -->
				<view class="iconfont icon-bold" @click="toolBarClick('bold')"></view>
				<!-- 斜体 -->
				<view class="iconfont icon-italic" @click="toolBarClick('italic')"></view>
				<!-- 标题 -->
				<view class="iconfont icon-xiahuaxian1" @click="toolBarClick('header')"></view>
				<!-- <view class="iconfont icon-underline" @click="toolBarClick('underline')"></view>
				<view class="iconfont icon-strike" @click="toolBarClick('strike')"></view>
				<view class="iconfont icon-sup" @click="toolBarClick('sup')"></view>
				<view class="iconfont icon-sub" @click="toolBarClick('sub')"></view>
				<view class="iconfont icon-alignleft" @click="toolBarClick('alignleft')"></view>
				<view class="iconfont icon-aligncenter" @click="toolBarClick('aligncenter')"></view>
				<view class="iconfont icon-alignright" @click="toolBarClick('alignright')"></view> -->
				<!-- 插入链接 -->
				<view class="iconfont icon-link" @click="toolBarClick('link')"></view>
				<!-- 插入图片 -->
				<view class="iconfont icon-image" @click="toolBarClick('imgage')"></view>
				<!-- 插入代码 -->
				<view class="iconfont icon-code" @click="toolBarClick('code')"></view>
				<!-- 插入引用 -->
				<view class="iconfont icon-blockquote" @click="toolBarClick('blockquote')"></view>
				<!-- 插入列表文本 -->
				<view class="iconfont icon-unorderedlist" @click="toolBarClick('unorderedlist')"></view>
				<!-- 插入列表文本 -->
				<view class="iconfont icon-orderedlist" @click="toolBarClick('orderedlist')"></view>
				<!-- 插入表格 -->
				<view class="iconfont icon-table" @click="toolBarClick('table')"></view>
				<!-- 清除 -->
				<view class="iconfont icon-qingkong" @click="toolBarClick('clear')"></view>
				<!-- 预览 -->
				<view class="iconfont icon-preview" @click="toolBarClick('look')"></view>
			</view>
			<view class="input-content" v-if="!showPreview">
				<textarea :style="{ height: height + 'rpx' }" maxlength="-1" v-model="textareaData" @blur="getCursor" :focus="autoFocus" :fixed="true"></textarea>
			</view>
			<scroll-view v-if="showPreview" class="u-p-30" scroll-y :style="[{ height: height + 'rpx', width: 'auto', border: '1px solid #eee' }]">
				<u-parse
					:html="textareaHtml"
					@imgtap="navigate"
					@linkpress="navigate"
					:tag-style="vuex_parse_style"
					:domain="vuex_config.upload ? vuex_config.upload.cdnurl : ''"
				></u-parse>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import marked from '@/components/fa-markdown/marked/index.js';
export default {
	name: 'fa-markdown',
	data: function() {
		return {
			cursor: 0,
			textareaData: '',
			textareaHtml: '',
			showPreview: false,
			autoFocus: false
		};
	},
	props: {
		markdown: {
			type: String,
			default: ''
		},
		html: {
			type: String,
			default: ''
		},
		height: {
			type: Number,
			default() {
				return 500;
			}
		},
		//多个富文本的区分
		marKey:{
			type:[String,Number],
			default:''
		}
	},
	methods: {
		preview(src, e) {
			uni.previewImage({
				urls: src
			});
		},
		navigate(e) {
			console.log(e);
		},
		toolBarClick(type) {
			switch (type) {
				case 'bold':
					this.textareaData += '**粗体文字** ';
					break;
				case 'italic':
					this.textareaData += '*斜体* ';
					break;
				case 'header':
					uni.showActionSheet({
						itemList: ['标题1', '标题2', '标题3', '标题4', '标题5', '标题6'],
						success: res => {
							switch (res.tapIndex) {
								case 0:
									this.textareaData += '# 标题1\r';
									return;
								case 1:
									this.textareaData += '## 标题2\r';
									return;
								case 2:
									this.textareaData += '### 标题3\r';
									return;
								case 3:
									this.textareaData += '#### 标题4\r';
									return;
								case 4:
									this.textareaData += '##### 标题5\r';
									return;
								case 5:
									this.textareaData += '###### 标题6\r';
									return;
							}
						}
					});
					break;
				case 'underline':
					this.textareaData += '++下划线++ ';
					break;
				case 'strike':
					this.textareaData += '~~中划线~~ ';
					break;
				case 'sup':
					this.textareaData += '^上角标^ ';
					break;
				case 'sub':
					this.textareaData += '~下角标~ ';
					break;
				case 'alignleft':
					this.textareaData += '\n::: hljs-left\n\n左对齐\n\n:::\n';
					break;
				case 'aligncenter':
					this.textareaData += '\n::: hljs-center\n\n居中对齐\n\n:::\n';
					break;
				case 'alignright':
					this.textareaData += '\n::: hljs-right\n\n\n\n右对齐\n\n:::\n';
					break;
				case 'link':
					this.textareaData += '[在此输入网址描述](在此输入网址) ';
					break;
				case 'imgage':
					uni.chooseImage({
						count: 1,
						success: async chooseImageRes => {
							const tempFilePaths = chooseImageRes.tempFilePaths;
							try {
								let res = await this.$api.goUpload({filePath:tempFilePaths[0]});
								console.log(res);
								this.textareaData += '![](' + res.data.fullurl + ') ';
							} catch (e) {
								console.error(e);
								this.$u.toast('上传失败！');
								this.textareaData += '![](在此输入图片地址) ';
							}
						}
					});
					break;
				case 'code':
					this.textareaData += '\n``` 代码块 \n\n```\n';
					break;
				case 'blockquote':
					this.textareaData += '> 这里输入引用文本这里输入引用文本\n';
					break;
				case 'unorderedlist':
					this.textareaData += '- 这里是列表文本\n';
					break;
				case 'orderedlist':
					this.textareaData += '1. 这里是列表文本\n';
					break;
				case 'table':
					this.textareaData += '\n|列1|列2|列3|\n|-|-|-|\n|单元格1|单元格2|单元格3|\n';
					break;
				case 'clear':
					uni.showModal({
						title: '提示',
						content: '确定清空?',
						success: res => {
							if (res.confirm) {
								this.textareaData = '';
							}
						}
					});
					break;
				case 'look':
					this.showPreview = !this.showPreview;
					break;
				default:
					this.showPreview = false;
			}
		},
		getCursor(e) {
			//安卓失去焦点获取不到cursor位置,暂不使用
			//this.cursor = e.detail.cursor;
		},
		getAutoFocus() {
			this.autoFocus = true;
		},
		clearData() {
			this.textareaData = '';
		},
		getData() {
			return {
				key:this.marKey,
				textareaData: newValue,
				textareaHtml: this.textareaHtml
			};
		},
		setData(param) {
			this.textareaData = param;
		}
	},
	watch: {
		textareaData: function(newValue, oldValue) {
			this.textareaHtml = marked(newValue);
			this.$emit('getResult', {
				key:this.marKey,
				textareaData: newValue,
				textareaHtml: this.textareaHtml
			});
		},
		markdown: {
			handler: function(newValue, oldValue) {
				this.textareaData = newValue;
			},
			immediate: true
		},
		html: {
			handler: function(newValue, oldValue) {
				this.textareaHtml = newValue;
			},
			immediate: true
		}
	}
};
</script>

<style>
@font-face {
	font-family: 'iconfont';
	src: url(data:application/font-woff2;charset=utf-8;base64,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)
			format('woff2'),
		url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABVkAA0AAAAAJLgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAVSAAAABoAAAAchPqfoUdERUYAABUoAAAAHgAAAB4AKQBAT1MvMgAAAZwAAABDAAAAVjxyScRjbWFwAAACMAAAAIEAAAGYn7C0D2dhc3AAABUgAAAACAAAAAj//wADZ2x5ZgAAAywAAA8fAAAbICVefjFoZWFkAAABMAAAAC8AAAA2Ena8lGhoZWEAAAFgAAAAHAAAACQH3wO3aG10eAAAAeAAAABOAAAA3s43CS9sb2NhAAACtAAAAHYAAAB2ue6y3G1heHAAAAF8AAAAHwAAACABUwB0bmFtZQAAEkwAAAFJAAACiCnmEVVwb3N0AAATmAAAAYYAAAIpp7BySXjaY2BkYGAA4h3TmnLj+W2+MnCzMIDA9dU2Pgj6fz0LI3MDkMvBwAQSBQArHQoSAHjaY2BkYGBu+N/AEMMCZDEwAEkwjQRMAUdnAqB42mNgZGBgsGLIYOBnAAEmIOYCQgaG/2A+AwAZ6QHIAHjaY2BkYWCcwMDKwMDUyXSGgYGhH0IzvmYwYuQAijKwMjNgBQFprikMDs+Yn19kbvjfwBDD3MjQCBRmBMkBAOqnDLIAeNpjYYAAxlAGBhYGDHyAhRFKMzBcgIo5IOQZQbQVEJtB1WHDDVA5ByT9DajmMCyA8pHF9IFYAc0smLwMFCPcCZKDugEIOsDkPQAggAo1AAB42t2O2w2CQBBFzy6yvhDFB2ET6uCDD+qhAgohsQIrsomhBhKSdVQ+sAVPMvfmJjM3A0R8p8TwptdkPnlFp56yweIkl0pqaeQxPEMAQYpl9sFPfvT3otXrlCWRNsWzOtbat2XHnoSDbh45kXHmwpUbORjH/Iq6VbH8Yvh7XiInGgAAAAAAAAAAAAAAAAAoAE4AdACcALgA/gE4AVQBhAGkAfICKAKAAx4DeAPYBFIEigTWBOQFEgUqBbIF2AX6BkQGWAaWBsQHBgckB2wHwAgsCG4IiAiuCNIJNAlyCdYKLgpYCoIKygs6C2oLhAweDHQMsAzSDP4Ndg2QAAB42q1Ya2wc13W+587uDtek9sHd2eFDInd3uLuiSa1Izj70sjSyEUWUYpulFddKfoiODNaFJSGxDcFwbHhkC61ipHbgpE7tBhYDKoCc/LBRQKmLKsakcIWiQAEFUJLGdmwWaH/kT+E2RqMWnNl+584uuZIpG0WzO3Nfc++dM+f5nSuiQrS8iNAcoQld9IqkyAiRLhgFEzfXWruOiFXhSdd3+fa4x7fmuI7bEi6pUghxy/1u/nd26L7VbuFffNZe6a6b13ZIuwVlt9wr2t6DuvYit7NbcKv9pPBaruZoLh7Ghcik45TWcBc8cshxWqKFKZqLvZyAufUqYUQrYxC/CElPZMU41o2QmSC9SttpLzWNYkyP6Y3CRoP/cuwZKZ85hpKi/tv7H6v2J9JyfoNB8sIRlPm3/ag7VU1ntQ2GBDjhtTx8gyMSIidGhcDr6lWqgA94b5XIHqFsTLcyVtpWJMl3Nue1b50MPHJPfkuju4KzixM7d04snj9/ftseoj30l8Uj2/Fk1cWszz9Kn6fZE7MUuCRottGY5U+X4qpwtCl8P0tBlJoF09YsjWzTojt3Uc+uR70Vj/oO7rrseKG6CU+xDPJztRXwO5SfKcQ0pJXBPUymFq3olWalaTZN3ZSOj6We73zxn556R/Y8++zezgVhur6jpfJ+yusaDulyhKvhjdAU0BWXdpwKVpxsIgiThMsFKhYjCumyhHkkrFmuLWwP+ipiOzhZr5RBkF7eThakV9HNWJIMMwfymrlRspsN0FppYIZVqTdtMyLOb8o9/DW3Uk0tpaoV92sP5zad/+TQ9131o6lPm7Q2lFeTQzsKaYuLPmi+IbaAQqvOgsa/AtabVqlg2GlYQd1O24atgfuBw3bgLS4GLt/keAH2CITngk2O57OKO4uLtLjoYm5LeOR5IgleQKOk22VnphiGdlngzAR4Y4um2I3324al4zbad6Wrpq7xzlj3rQkH1qh+brugdl911i7ZGfVUSc5NP9arXdCrK7CBbeJz4h7xR9DJKk1QhRq1SpxiWZN0CxaYIHOE7JlGcy9BzWK5dq9RjsJSY1axKus1PINcZ0akEYP11BozuWwMj61iBUZVrtT2SpvXmTkjG9O+bs2Pb3FEa2oqOBOcmZoSLWfL+Lx1R8LO7SqgsbWo79+vF7diWmFXzk74r/dNDg8M9G0Z6OntnRweHOjbPNhDf1627S/YNk33bekbGBie7LuNega4uXmyt7fnb4uWQ6L2FzVIz0XVEo5VdF6pmzmrOP6V6p13Vr8yXrRyZv2V2aHJvl6s7F3fpHfgVbLvtnH5fT29fZNDgwO9eDndpujo3cJ61YD/+EftNsh5sxgTk6IGuYIf+EblQDIJAmPw3eBJNkYVPMKDKJ5UMCdqGTCFZkWK5V9FIr9aVuX47Q8//vB9ExP3hVXwBxOHHy/fP3JMPnJ/+fHDE3ccC37oUO/S1u9Ir7MEpf/W+NoSrmSuPft77eVNLxV3Z06HfuSZCEHeUdjBBHRRUKFS0AuanYE3AWWgHPRnTVhnVZGMHqx1hPZRo1xam5AgbSlYyAdLiAE7Dm9bFQ7969xx0l597LFXtS9fGSJ5Yn7+hETZnHyjfzobzcjgTP0A0YG6KqHDsCXyfHfk3JewBAsL//HGZDNcg5KGrmRlJpqdvthZglLE1myZ7Wtc1MV+cTfiCPxgiaOYlQ6N2gLhaZDJnjxtr7Xg1K1iudbYTaycma529zisKYDj5ZKe2NFSPm7HyDjR+AhNoXY7DRr3/+R60jCSXFxyEv39CS7o1NqgxhbYUn5S3eMj/tX2Tk8E58KWxFb+mf7N/bjIC+vACes136++OSY2IW4OQ2Zp5fCjJlwrvFYzXYD3T+Ij02YzIp6/duLa88FpLkHrfz0fuBj552uqhgdz1fPnw8er7ceq8/y1G9+nwX/l4RlEib0SmGjoVr1ZL9SbxYTMjsiZvbJWlZXpnDBjQi+LSgMShX8Ww2OovcDzjnz39L59p797MayOvEuFaDT48N13gw+jUSp4rnRobNhTkGdpfR5XC13z3sU6wWGGnAjeALrEGlbxFFaKbYBvcusIp/Pn9iBFbwQ560CHuiEYopurYi9HP08D2uHISMo9I0wggGiuG3hu4DAo0hzHh1uGWjN1bf71iRnxALiXazSBLcoxHd6hCfeXpFhxO5VrMCl7xmyW4WExlB0Fi2ca+zC1QvCZPAi/2yzXeeLMKOV4IdypnrN5WqNGTqKUpD0JGi4lg3cS9EM9s5xtZI5nMsuZ4VRi/0RtZKe5XK0eN3fesWNg+faYRZceMnfu2WleQHu/nrmQaWQe6u+/sD77wjZvE966J1kapkTwTrKUTKSGsR02bWSXM/r+fM5cnnp66riJ3/Lko9vpZ2vN/RtOZWwB/gFpQSr97G8MKx3+lTehTQTMJjhWK4wWfKiwouP64KQv2ngueHZlRazhDMTXXkawEIJdt1WctEowe4RwAEAPuseqtQpIA5Xhjse2rEAM4z4HMQ8SxQ5DrN3M7Eqh22NUSc+ZVj1nZrIxq1As19O1hl2YMQ07Z2h/+sLgPcUgX9xGtK0oV7jOfy4aWdYjl+K6n9fjcZ1W9Hgg5d+8MJDnSatL7ckLxXuMiL4cia7+mKdpC3pcBnFd6RhwgyuXGK1k4qwALuVpxQ2WlmghWAlbrOdOl//rFWlgGeDoUlc2UElbdaueYabAVsGgLZRmNoX3jWrPuAC8YQ7h58Dp8eUBzDj+f844L+3B/e9BiB7+LzZG6dKtbazVbWUSw7Ay/Qa/Hu49DMwkgMasJu5SV60hVHG4Iq0A7FzQmH4PHOxUqZQvUvmUdFO+k9K46bupdYTkSAfYzmOFWA2dPHIUZedLbTtPbqClbpeK3qycjAU6chkWBVESW0WVUXCtPKFSCg5HBqzcSGdzNvjTTNPUNCPAesHI1O2mxaLTnP7ECtyhC++5wrEECuAhQOK78O7FIfhTCci5lOh3MAMTMd93E/1A+6Cd8Z7/pUXHk47opicpbhdTQCY72HfZTTsNSFlHRmPa9cot6esij0CZFPm8M7Uy5aD6BI0sWkUiiUBw1HQR8AA2QZH3SVql1ybVUXQi1gj4dLkCmWeBjveBylhEz0XMxlizPKZzBsaBGS6pWAaIBORsxtoAq1zJIaOIaeU8UgwDT/Lo1stSvBb87uhRir/2GsWPHg1+98Hw2FhjbIwe3HP2m2f3HDt48Nh0baSNT2ikNo2RngvBCxeOHjpy4mU68vKJI4cQlr5x+vQ3SJXPEC9vjLXEaD4/Oj03Nz2YrO4OgcruanIQI/S9I0e23XXyaPPuu5tHT94VxtCOrTD+H1MaBdtoexl2VHYbkYDBpfArZ3JIrZiL3qobsg1s9VQr+DfWV0oMbR3CxQaEpwE/U3nY2DCB0f4ZclayPGFI6fP2tp+Lsy7GqR6RZrlfKngT/OSBB395Vp67HnAnFrx58b9lhP1r/lN9NdyY6DaE0VYYNG8wh9W/U756PQ5GRA88lSCFzaCBFHpq29TcVcwIsCFhC6jE4TofGmjw1Ei2BDJtp96Vv3Hem1eoD1oidMCOhmiWhdaFSpWiMCejnYaGR+o4oQKhiy5EoZDIW7+NRn/7liqDf2gLms50JP7IxYn+N5966s3+iYuaexMgWf1iZyFK+UioZMNhFbwiD9jPva5prz9nHwgxROcb4NPGGbDVVYrQBtiwOLPAhgith+5jUNlJ4D70pIxcefnlKxH55EMBZC5efEN2yJdvvAg+/WLyp0//4OeRyM9/8PRPJ38B91eovf/i23406r/94vs1fre+Fu82QQqjbW+wF3EGkTPdtv40571Wqd4BzuwjdOUalJ7WG2WwWG/HkThpTZMNve0JHBde02trrOeqknuZoaHMfpWxi2BhZf4FWkBCTW3VZn1219UY2enCAuqARxbUlL93OUfAQP7Ad6iqYn9oU7bKW9TpjPILVarbnaSrovo1zlRnON00rDUuQylgg/K96VptettXn/rqtumaK0/NzZ2SKPdyd8Nxf17Fra+XFk4slIqWVSwtNBqzpM50iHsbDSO3lWIz+O7KUG9FdD0iG5qlV/h0pWnapAkVgd8/d/nyOQ6OXLdEoh195fzly5x/XL5M4TnNZoAat20L7NHX9tQ/c0/5V+1NT92w520bxPX1MwsxCGulemGLLNQJwBehqp5up1tpFR+McTw2IsJ3O2lOO+OR7YFVt9PTnFXQ7iNO8/GWQM1Yg6O2x9mCp/B24gYsEFIT0hKenuwTd4mD4QmKQgRtdBPt9JknUObMZzxnb5SZZsDI4cvlAx4XwEC1AXmAjTYeli5/A8ClVLioxeGMWx6bpxNsNCj5s71VFe2EOjsNzx1zwJ/4jnTonmCCWdZYdcpS53AhPVe7dO7cJc0dGtx8cP7g5sGhQJ30ak6w8OSypi0/ScjCR3aYg0NDg+aOkWDJZV/D9v6z0O9HG7JkxMmI9Mv/efCB4CcqivzZWfcizcUCNN3rvf6qgH/u8LwkDot7xX3iD8WXxTFxnLOX31/CEuUzSrCfZUGcvLZPu+jXv4/MZfU3XtX7Ywdu0/M0E+3XGYZ43q//vynM/djrN9DZ4JdojHvkOZ2csxuzmtDR7WGc72Bx6oQlyFe7RftmkBw6kE8tNXUIj0tzuh4EP75VR7AmMChRp9432nixbeHrKYKtLKOrH1Vo3gsPXwGeWYPDjg/L5cCP2wkH3BAO8o+BvSbOiR7tCXkdLX6ryGDvfbR+6n1OfuSnLsLFO09c/egq5eecq/K6n8pfvSrf9Ofk1qshlvoYGPFjRXtKGCHFGnbSWf9q5WIso+m9FBFzq0vawkfUmG/g+mvP/ciTHyvq5uTC0jgPNoJ7Kb9AU0HqJlxRgGe5F9Lj/ZDyxQCElXYzRAMwzoxQA1lgGa0EWXxQBkzE6eLMXllPWyUEnMIIbSG7XqtKrE9ItLX3UoaRWj3EJc1SdsQgyo4a79HY2FjpfTKSgUgaNCvv2C5FbutoejYQ2RSdShqH0qNbc8FLPHZIusaogQtzs7CnU3y0FLxkZLMGnTJyOcNvYY9sUn7bP1ndS+nRSk5++6VUFm9Kzc7yDqn81tyswiAftK5qBfkj0Qc57CaVL/OBmfXB9Aw9ffx48Nxx+aPgGk36JXoguIgl/wum5zf1AHjafZA9TgMxEIWf8wckEkIgqF1RANr8lCkTKfQIpaNINt6QaNdeeZ1IOQEtFQeg5RgcgBsg0XIKXpZJkyJr7ejzm5nnsQGc4xsK/98l7oQVjvEoXMERMuEq9RfhGvlduI4WPoUb1H+Em7hVA+EWLtQbHVTthLub0m3LCmcYCFdwiifhKvWVcI38KlzHFT6EG9S/hJsY41e4hWtlqQzhYTBBYJxBY4oN4wIxHCySMgbWoTn0ZhLMTE83ehE7mzgbKO9XYpcDHmg554Ap7T23Zr5KJ/5gy4HUmG4eBUu2KY0uInQoG18snNXdqHOw/Z7ttrTYv2uBNcfsUQ1s1Pw92zPSSGwMr5CSNfIyt6QSU49oa6zxu2cp1vNeCIlOvMv0iMeaNHU6925p4sDi5/KMHH20uZI996gcPmNZCHm/3U7EIIpdhj+T2HEZAAAAeNptj9lu2zAQRX0tSrakpE33fU33PV2B/g1FjSRWFMmMSMf+g352afelDx3gDs4QQ+DMYrn4W9Xi//UzBYsllsggkKPACmuUqFDjCMe4hMs4wRVcxTVcxw3cxC3cxh3cxT3cxwM8xKPFbzzGEzzFKZ7hOV7gJV7hNd7gLd7hPT7gIz7hDJ/xBV/xDd/xo5ZG91aRDcRHB/4V56C7XXkYDHWhOhDrfgiFtGpwXDXGqfE8ukCicaYVapBcK0OSO8eTDEK5lkrlbKf7yJRGvyuUY0ucqRjWrQwU9EQr2nrj0kKnbVt10ZhZMZEVAxm/HLhIz0mt0CE5KGG0HTMTWNhm9pmli6Uba8ctMbVGz2HlYtjvl1721DDJMfdyDlQf+j7bsPJMG00XuWdtg0g/XcbBiFluqJgnbWhXz56UlmZ/VZXYJCI1FnNgPVI2xybF50E2htaBJm/SOWVMqpwMSSRyRbR72+No//HLN7olJybJY66n5Lg+17Yfne3rrZZDlKnbsz/BTZqeAAAAAAAB//8AAgABAAAADAAAABYAAAACAAEAAwA5AAEABAAAAAIAAAAAeNpjYGBgZACCq0vUOUD09dU2PjAaADzdBb4AAA==)
			format('woff');
	font-weight: normal;
	font-style: normal;
}

.iconfont {
	font-family: 'iconfont' !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-aligncenter:before {
	content: '\e600';
}

.icon-alignjustify:before {
	content: '\e601';
}

.icon-alignleft:before {
	content: '\e602';
}

.icon-aligncenter1:before {
	content: '\e603';
}

.icon-alignjustify1:before {
	content: '\e604';
}

.icon-alignleft1:before {
	content: '\e605';
}

.icon-alignright:before {
	content: '\e606';
}

.icon-anchor:before {
	content: '\e607';
}

.icon-blockquote:before {
	content: '\e608';
}

.icon-bold:before {
	content: '\e609';
}

.icon-char:before {
	content: '\e60a';
}

.icon-clearformat:before {
	content: '\e60b';
}

.icon-code:before {
	content: '\e60c';
}

.icon-configure:before {
	content: '\e60d';
}

.icon-copy:before {
	content: '\e60e';
}

.icon-corner:before {
	content: '\e60f';
}

.icon-cut:before {
	content: '\e610';
}

.icon-datetime:before {
	content: '\e611';
}

.icon-explore:before {
	content: '\e612';
}

.icon-find:before {
	content: '\e613';
}

.icon-fullscreen:before {
	content: '\e614';
}

.icon-help:before {
	content: '\e615';
}

.icon-hr:before {
	content: '\e616';
}

.icon-indent:before {
	content: '\e618';
}

.icon-italic:before {
	content: '\e619';
}

.icon-link:before {
	content: '\e61a';
}

.icon-ltr:before {
	content: '\e61b';
}

.icon-nbsp:before {
	content: '\e61c';
}

.icon-new:before {
	content: '\e61d';
}

.icon-ok:before {
	content: '\e61e';
}

.icon-orderedlist:before {
	content: '\e61f';
}

.icon-outdent:before {
	content: '\e620';
}

.icon-pagebreak:before {
	content: '\e621';
}

.icon-paragraph:before {
	content: '\e622';
}

.icon-paste:before {
	content: '\e623';
}

.icon-pasteastext:before {
	content: '\e624';
}

.icon-preview:before {
	content: '\e625';
}

.icon-print:before {
	content: '\e626';
}

.icon-redo:before {
	content: '\e627';
}

.icon-rtl:before {
	content: '\e628';
}

.icon-save:before {
	content: '\e629';
}

.icon-smiley:before {
	content: '\e62a';
}

.icon-specialchar:before {
	content: '\e62b';
}

.icon-spellcheck:before {
	content: '\e62c';
}

.icon-strike:before {
	content: '\e62d';
}

.icon-sub:before {
	content: '\e62e';
}

.icon-sup:before {
	content: '\e62f';
}

.icon-table:before {
	content: '\e630';
}

.icon-template:before {
	content: '\e631';
}

.icon-underline:before {
	content: '\e632';
}

.icon-undo:before {
	content: '\e633';
}

.icon-unlink:before {
	content: '\e634';
}

.icon-unorderedlist:before {
	content: '\e635';
}

.icon-video:before {
	content: '\e636';
}

.icon-mark:before {
	content: '\e63a';
}

.icon-image:before {
	content: '\e63e';
}

.icon-xiahuaxian1:before {
	content: '\e7d1';
}

.icon-qingkong:before {
	content: '\e6a3';
}


.input-content {
	width: 100%;
}

.input-content textarea {
	padding: 5%;
	font-size: 30rpx;
	line-height: 1.5;
	width: 90%;
	border: 1px solid #eee;
}

.preview {
	border-top: 1px solid #e0e0e0;
	width: 100%;
}

.toolbar {
	width: 100%;
	border: none;
}

.toolbar .iconfont {
	display: inline-block;
	cursor: pointer;
	height: 61.6rpx;
	width: 61.6rpx;
	margin: 13rpx 0;
	font-size: 33rpx;
	color: #757575;
	border-radius: 11px;
	text-align: center;
	background: none;
	border: none;
	outline: none;
	line-height: 2.2;
	vertical-align: middle;
}

.input-content {
	min-height: ;
}
</style>