<template>
	<div class="cl-editor-froala">
		<froala ref="editor" v-model="value2" :config="options2"></froala>
	</div>
</template>

<script>
import { deepMerge } from '../../utils/index';

export default {
	name: 'cl-editor-froala',

	props: ['value', 'options'],

	watch: {
		value2(val) {
			this.$emit('input', val);
		},

		value(val) {
			this.value2 = val;
		}
	},

	data() {
		return {
			value2: '',
			options2: {
				language: 'zh_cn',
				placeholder: '请填写内容',
				toolbarButtons: {
					moreText: {
						buttons: [
							'bold',
							'italic',
							'underline',
							'strikeThrough',
							'subscript',
							'superscript',
							'fontFamily',
							'fontSize',
							'textColor',
							'backgroundColor',
							'inlineClass',
							'inlineStyle',
							'clearFormatting'
						]
					},
					moreParagraph: {
						buttons: [
							'alignLeft',
							'alignCenter',
							'formatOLSimple',
							'alignRight',
							'alignJustify',
							'formatOL',
							'formatUL',
							'paragraphFormat',
							'paragraphStyle',
							'lineHeight',
							'outdent',
							'indent',
							'quote'
						]
					},
					moreRich: {
						buttons: [
							'insertLink',
							'insertImage',
							'insertVideo',
							'insertTable',
							'emoticons',
							'fontAwesome',
							'specialCharacters',
							'embedly',
							'insertFile',
							'insertHR'
						]
					},
					moreMisc: {
						buttons: [
							'undo',
							'redo',
							'fullscreen',
							'print',
							'getPDF',
							'spellChecker',
							'selectAll',
							'html',
							'help',
							'preview'
						],
						align: 'right',
						buttonsVisible: 2
					}
				},
				colorsHEXInput: false,
				toolbarSticky: true,
				zIndex: 99999,
				imageUploadURL: null,
				videoUploadURL: null,
				requestHeaders: {
					Authorization: null
				}
			},
			froala: null
		};
	},

	created() {
		deepMerge(this.options2, this.options);
	},

	mounted() {
		this.$emit('load', (this.froala = this.$refs.editor));
	}
};
</script>

<style lang="stylus">
.cl-editor-froala {
	.fr-box {
		.fr-wrapper, .fr-toolbar, .second-toolbar {
			border: 1px solid #DCDFE6 !important;
		}

		.fr-toolbar {
			border-radius: 3px 3px 0 0;
			border-bottom: 0 !important;
		}

		.fr-wrapper {
			border-top: 0 !important;

			& > div[style*='z-index:9999'] {
				position: absolute;
				top: -10000px;
				opacity: 0;
			}

			& > div[style*='z-index:9999'] + .fr-element {
				margin-top: -40px;
			}

			& > div[style*='z-index:9999'] + .fr-element + .fr-placeholder {
				margin-top: 0px !important;
			}
		}

		.second-toolbar {
			border-top: 0 !important;
			border-radius: 0 0 3px 3px;
		}
	}

	#logo {
		display: none;
	}
}
</style>
