<template>
 <div>
 <editor ref="editor" id="tab1Editor"></editor>
 <button @click="getContent" class="m-t-10">獲取內容</button>
 <div>
 <span>當前富文本編輯器內容是: {{content}}</span>
 </div>
 </div>
 </template>

 <script>
 import Editor from '@/components/editor'
 export default {
 name: 'tab1',
 components: { Editor },
 data() {
 return {
 content:''
 }
 },
 methods: {
 //獲取內容
 getContent(){
 this.content = this.$refs.editor.content
 }
 }
 }
 </script>

 <style scoped>
 .m-t-10{
 margin-top: 10px;
 }
 </style>

 <template>
 <div>
 <div :id="this.id"></div>
 </div>
 </template>

 <script>
 export default {
 name: 'editor',
 props: ['id'],
 data() {
 return {
 ue: '', //ueditor實例
 content: '', //編輯器內容
 }
 },
 methods: {
 //初始化編輯器
 initEditor() {
 this.ue = UE.getEditor(this.id, {
 initialFrameWidth: '100%',
 initialFrameHeight: '350',
 scaleEnabled: true
 })
 //編輯器準備就緒后會觸發該事件
 this.ue.addListener('ready',()=>{
 //設置可以編輯
 this.ue.setEnabled()
 })
 //編輯器內容修改時
 this.selectionchange()
 },
 //編輯器內容修改時
 selectionchange() {
 this.ue.addListener('selectionchange', () => {
 this.content = this.ue.getContent()
 })
 }
 },
 activated() {
 //初始化編輯器
 this.initEditor()
 },
 deactivated() {
 //銷毀編輯器實例，使用textarea代替
 this.ue.destroy()
 //重置編輯器，可用來做多個tab使用同一個編輯器實例
 //如果要使用同一個實例,請注釋destroy()方法
 //this.ue.reset()
 }
 }
 </script>