From 6795c26d025397110a80a5d4506f820a25c32fda Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Wed, 9 May 2018 14:36:17 +0800
Subject: [PATCH] fix[Tinymce]: custom-btn bug in fullscreen

---
 src/components/Tinymce/index.vue  | 14 ++++++++++++--
 src/components/Tinymce/toolbar.js |  2 +-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/Tinymce/index.vue b/src/components/Tinymce/index.vue
index 97ad2432..52356249 100644
--- a/src/components/Tinymce/index.vue
+++ b/src/components/Tinymce/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tinymce-container editor-container">
+  <div class="tinymce-container editor-container" :class="{fullscreen:fullscreen}">
     <textarea class="tinymce-textarea" :id="tinymceId"></textarea>
     <div class="editor-custom-btn-container">
       <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
@@ -43,7 +43,8 @@ export default {
     return {
       hasChange: false,
       hasInit: false,
-      tinymceId: this.id || 'vue-tinymce-' + +new Date()
+      tinymceId: this.id || 'vue-tinymce-' + +new Date(),
+      fullscreen: false
     }
   },
   watch: {
@@ -91,6 +92,11 @@ export default {
             this.hasChange = true
             this.$emit('input', editor.getContent())
           })
+        },
+        setup(editor) {
+          editor.on('FullscreenStateChanged', (e) => {
+            _this.fullscreen = e.state
+          })
         }
         // 整合七牛上传
         // images_dataimg_filter(img) {
@@ -168,6 +174,10 @@ export default {
   top: 4px;
   /*z-index: 2005;*/
 }
+.fullscreen .editor-custom-btn-container {
+  z-index: 10000;
+  position: fixed;
+}
 .editor-upload-btn {
   display: inline-block;
 }
diff --git a/src/components/Tinymce/toolbar.js b/src/components/Tinymce/toolbar.js
index de4906fc..a31efc4a 100644
--- a/src/components/Tinymce/toolbar.js
+++ b/src/components/Tinymce/toolbar.js
@@ -1,6 +1,6 @@
 // Here is a list of the toolbar
 // Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
 
-const toolbar = ['bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap	 preview anchor pagebreak fullscreen insertdatetime media table emoticons forecolor backcolor']
+const toolbar = ['bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap	 preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen']
 
 export default toolbar