From bf97764daf17dc558a55e5a6cae4c4378618c8cd Mon Sep 17 00:00:00 2001
From: ansonhorse <ansonhorse@gmail.com>
Date: Mon, 22 Apr 2019 20:25:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0`width`=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=EF=BC=8C=E5=8F=AF=E4=BB=A5=E8=AE=BE=E7=BD=AE=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E7=9A=84=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Tinymce/index.vue | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/Tinymce/index.vue b/src/components/Tinymce/index.vue
index a05c3b9c..67d6b48b 100644
--- a/src/components/Tinymce/index.vue
+++ b/src/components/Tinymce/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="{fullscreen:fullscreen}" class="tinymce-container editor-container">
+  <div :class="{fullscreen:fullscreen}" class="tinymce-container editor-container" :style="containerStyle">
     <textarea :id="tinymceId" class="tinymce-textarea" />
     <div class="editor-custom-btn-container">
       <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" />
@@ -41,6 +41,11 @@ export default {
       type: Number,
       required: false,
       default: 360
+    },
+    width: {
+      type: [Number, String],
+      required: false,
+      default: ''
     }
   },
   data() {
@@ -58,6 +63,19 @@ export default {
   computed: {
     language() {
       return this.languageTypeList[this.$store.getters.language]
+    },
+    /**
+     * Computes style for `div.editor-container`
+     * @return {Object}
+     */
+    containerStyle() {
+      const style = {}
+      if (/^[\d]+(\.\d+)?$/.test(this.width)) { // Matches `100`, `'100'`
+        style.width = `${this.width}px`
+      } else if (/^[\d]+(\.\d+)?([a-z]{2}|%)$/.test(this.width)) { // Matches `100px`, `100rem`, `70%`, etc
+        style.width = `${this.width}`
+      }
+      return style
     }
   },
   watch: {