<template>
	<div>
		<div class="data">
			{{ content }}
		</div>

		<cl-editor-froala v-model="content" :options="options" @load="onLoad"></cl-editor-froala>
	</div>
</template>

<script>
export default {
	data() {
		return {
			options: {
				height: '300px'
			},
			content: ''
		};
	},

	methods: {
		onLoad(ref) {
			console.log(ref);
		}
	}
};
</script>

<style lang="stylus" scoped>
.data {
	height: 100px;
	width: 100%;
	border: 1px solid #DCDFE6;
	background-color: #fff;
	margin-bottom: 10px;
	padding: 10px;
	box-sizing: border-box;
	overflow-y: auto;
	word-break: break-all;
}
</style>
