Update

davidroyer · davidroyer · commit 7fe0ac349f28 · 2017-04-06T08:49:11.000-04:00
diff --git a/dist/index.js b/dist/index.js
diff --git a/example/App.vue b/example/App.vue
@@ -1,56 +1,67 @@
 <template>
-  <div id="app">
-    <div class="container grid-960">
-      <h1>Vue2Editor 2.0 (In Development)</h1>
-      <!-- <vue-editor
+<div id="app">
+  <div class="container grid-960">
+    <h1>Vue2Editor 2.0 (In Development)</h1>
+    <!-- <vue-editor
         v-model="content"
         :editor-toolbar="customToolbar">
       </vue-editor> -->
-        <!-- <button class="btn btn-primary" @click="saveContent(content)">Save</button> -->
-      <button class="btn btn-primary" @click="setEditor">Set Editor</button>
-      <div class="containers">
-        <div class="editorWrapper column col-6 col-sm-12">
-          <vue-editor v-model="editorContent"></vue-editor>
-          <button class="btn btn-primary" @click="saveContent(editorContent)">Save</button>
-        </div>
-        <div class="column col-6 col-sm-12 preview" v-if="showPreview" v-html="editorContent"></div>
+    <!-- <button class="btn btn-primary" @click="saveContent(content)">Save</button> -->
+    <button class="btn btn-primary" @click="setEditor">Set Editor</button>
+    <button class="btn btn-primary" @click="toggleDisabled">Toggle Disabled</button>
+    <div class="columns">
+      <div class="editorWrapper column col-6 col-sm-12">
+        <vue-editor :disabled="editorIsDisabled" v-model="editorContent"></vue-editor>
+        <button class="btn btn-primary" @click="saveContent(editorContent)">Save</button>
       </div>
+      <div id="preview" class="column col-6 col-sm-12" v-if="showPreview" v-html="editorContent"></div>
     </div>
   </div>
+</div>
 </template>
 
 <script>
+import {
+  VueEditor
+} from '../src/index.js'
 
-  import {VueEditor} from '../src/index.js'
+export default {
+  components: {
+    VueEditor,
+  },
+  data() {
+    return {
+      editorContent: '<h1>Starting Content</h1>',
+      showPreview: true,
+      content: '<h1>Html For Editor</h1>',
+      editorIsDisabled: false,
+      customToolbar: [
+        ['bold', 'italic', 'underline'],
+        [{
+          'list': 'ordered'
+        }, {
+          'list': 'bullet'
+        }],
+        ['image', 'code-block']
+      ]
+    }
+  },
 
-  export default {
-    components: {
-      VueEditor,
-    },
-    data() {
-      return {
-        editorContent: '<h1>Starting Content</h1>',
-        showPreview: true,
-        content: '<h1>Html For Editor</h1>',
-        customToolbar: [
-            ['bold', 'italic', 'underline'],
-            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
-            ['image', 'code-block']
-          ]
-      }
+  methods: {
+    setEditor() {
+      this.editorContent = 'Set programatically!'
     },
 
-    methods: {
-      setEditor() {
-        this.editorContent = 'Set programatically!'
-      },
+    saveContent(content) {
+      console.log(content);
+      // console.log(this.editorContent);
+    },
 
-      saveContent(content) {
-        console.log(content);
-        // console.log(this.editorContent);
-      }
+    toggleDisabled() {
+      this.editorIsDisabled = !this.editorIsDisabled
     }
   }
+}
 </script>
 
 <style>
@@ -64,9 +75,18 @@
   position: relative;
   z-index: 99999;
 }
-  .preview {
-    flex-basis: 50%;
-    background: #f9f9f9;
-    padding: .5em 3em;
-  }*/
+*/
+
+#preview {
+  background: #f6f6f6;
+  border-left: 3px solid gray;
+  padding: 2em;
+  margin-left: 1em;
+}
+@media (min-width: 601px) {
+  #preview {
+    width: 47%;  
+  }
+}
+
 </style>
diff --git a/src/VueEditor.vue b/src/VueEditor.vue
@@ -30,6 +30,12 @@ export default {
   props: {
     value: String,
     placeholder: String,
+    disabled: {
+      type: Boolean,
+      default () {
+        return false
+      }
+    },
     editorToolbar: Array,
   },
 
@@ -51,6 +57,9 @@ export default {
       if (val !=  this.editor.innerHTML && !this.quill.hasFocus()) {
         this.editor.innerHTML = val
       }
+    },
+    disabled(status) {
+      this.quill.enable(status);
     }
   },
 
