...

src/components/ckeditor.vue

@@ -1,29 +1,13 @@
 <template>
-  <div :style="divStyle">
-    <div class="ckeditor">
-      <textarea
-        :id="id"
-        :display="display"
-        :value="value"
-        class="el-textarea__inner"
-      ></textarea>
-    </div>
+  <div class="ckeditor" style="margin-bottom: 10px;">
+    <textarea :id="id" :value="value"></textarea>
   </div>
 </template>
 
 <script>
 let inc = 0;
 export default {
-  data() {
-    return {
-      divStyle: ""
-    };
-  },
   props: {
-    display: {
-      type: String,
-      default: "inline"
-    },
     value: {
       type: String
     },
@@ -33,11 +17,15 @@ export default {
     },
     height: {
       type: String,
-      default: "300px"
+      default: "200px"
     },
     width: {
       type: String,
-      default: "500px"
+      default: "980px"
+    },
+    toolbar: {
+      type: [String, Array],
+      default: null
     },
     language: {
       type: String,
@@ -59,43 +47,16 @@ export default {
     }
   },
   mounted() {
-    this.divStyle = this.divStyle + "width:" + this.width + ";";
-
     let config = {
+      toolbar: this.toolbar,
       language: this.language,
       height: this.height,
       width: this.width,
       extraPlugins: this.extraplugins,
-      toolbarGroups: [
-        { name: "clipboard", groups: ["clipboard", "undo"] },
-        {
-          name: "editing",
-          groups: ["find", "selection", "spellchecker", "editing"]
-        },
-        { name: "links", groups: ["links"] },
-        { name: "insert", groups: ["insert"] },
-        { name: "forms", groups: ["forms"] },
-        { name: "tools", groups: ["tools"] },
-        { name: "document", groups: ["mode", "document", "doctools"] },
-        { name: "others", groups: ["others"] },
-        "/",
-        { name: "basicstyles", groups: ["basicstyles", "cleanup"] },
-        {
-          name: "paragraph",
-          groups: ["list", "indent", "blocks", "align", "bidi", "paragraph"]
-        },
-        { name: "styles", groups: ["styles"] },
-        { name: "colors", groups: ["colors"] },
-        { name: "about", groups: ["about"] }
-      ],
       removeButtons:
         "Underline,Subscript,Superscript,Image,HorizontalRule,Unlink,Link,Scayt,Cut,Copy,Paste,PasteText,PasteFromWord,Maximize,Italic,Bold,NumberedList,BulletedList,Indent,Outdent,Blockquote,Styles,Format,About,RemoveFormat,Strike"
     };
-    if (this.display !== "inline") {
-      window.CKEDITOR.replace(this.id, config);
-    } else {
-      window.CKEDITOR.inline(this.id, config);
-    }
+    window.CKEDITOR.replace(this.id, config);
     this.instance.on("change", () => {
       let html = this.instance.getData();
       if (html !== this.value) {