Update to working verison of 2.0

davidroyer · davidroyer · commit 0a038b05895c · 2017-04-06T03:35:04.000-04:00
diff --git a/dist/index.js b/dist/index.js
diff --git a/example/App.vue b/example/App.vue
@@ -1,33 +1,38 @@
 <template>
   <div id="app">
     <h1>Vue2Editor 2.0 (In Development)</h1>
-    <!-- <vue-editor></vue-editor> -->
+    <button @click="setEditor">Set Editor</button>
     <div class="flexWrapper">
       <div class="editorWrapper">
         <vue-editor v-model="editorContent"></vue-editor>
         <button @click="saveContent">Save</button>
       </div>
-      <div class="preview" v-html="editorContent"></div>
+      <div class="preview" v-if="showPreview" v-html="editorContent"></div>
     </div>
 
   </div>
 </template>
 
 <script>
   import {VueEditor} from '../src/index.js'
-  // import Vue2Editor from '../src/Vue2Editor.vue'
+
   export default {
     components: {
       VueEditor,
       // Vue2Editor
     },
     data() {
       return {
-        editorContent: '<h1>Content</h1>'
+        editorContent: '<h1>Starting Content</h1>',
+        showPreview: false
       }
     },
 
     methods: {
+      setEditor() {
+        this.editorContent = 'Set programatically!'
+      },
+
       saveContent() {
         console.log(this.editorContent);
       }
diff --git a/package.json b/package.json
@@ -3,9 +3,9 @@
   "description": "HTML editor using Vue.js 2.0 and Quill.js, an open source editor&#34;",
   "version": "0.0.0",
   "repository": {},
-  "main": "dist/vue2-editor.js",
+  "main": "src/index.js",
   "files": [
-    "dist"
+    "src"
   ],
   "scripts": {
     "test": "echo lol",
diff --git a/src/VueEditor.vue b/src/VueEditor.vue
@@ -1,17 +1,14 @@
 <template>
 <div id="quillWrapper">
-  <div ref="quillContainer" id="quill-container" :value="value"></div>
-
-  <div v-if="showPreview" ref="livePreview" class="ql-editor"></div>
-
+  <div ref="quillContainer" id="quill-container"></div>
 </div>
 </template>
 <script>
 import Quill from 'quill'
 var icons = Quill.import('ui/icons');
 import 'quill/dist/quill.core.css'
 import 'quill/dist/quill.snow.css'
-// require('./icons/icons.js')
+require('./icons/icons.js')
 // icons['bold'] =
 //   `<svg fill="#2d2d2d" height="36" viewBox="0 0 24 24" width="36" xmlns="http://www.w3.org/2000/svg">
 //     <path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"/>
@@ -39,23 +36,9 @@ var defaultToolbar = [
 export default {
   name: 'vue-editor',
   props: {
-    editorContent: String,
     value: String,
     placeholder: String,
-    buttonText: String,
     editorToolbar: Array,
-    useSaveButton: {
-      type: Boolean,
-      default () {
-        return true
-      }
-    },
-    showPreview: {
-      type: Boolean,
-      default () {
-        return false
-      }
-    }
   },
 
   data: function() {
@@ -67,48 +50,47 @@ export default {
   },
 
   mounted: function() {
-    const vm = this
-
-    vm.quill = new Quill(vm.$refs.quillContainer, {
-      modules: {
-        toolbar: this.toolbar
-      },
-      placeholder: this.placeholder ? this.placeholder : '',
-      theme: 'snow'
-    });
-
-    vm.editor = document.querySelector('.ql-editor')
-
-    if (vm.value) {
-      vm.editor.innerHTML = vm.value
-    }
-
-    if (vm.$refs.livePreview !== undefined || false) {
-
-      vm.quill.on('text-change', function() {
-        vm.$refs.livePreview.innerHTML = vm.editor.innerHTML
-        vm.$emit('input', vm.editor.innerHTML)
-      });
-
-    } else {
-
-      vm.quill.on('text-change', function() {
-        vm.$emit('input', vm.editor.innerHTML)
-          // vm.$emit('editor-updated', vm.editor.innerHTML)
-      });
-
-    }
+    this.initializeVue2Editor()
+    this.handleUpdatedEditor()
   },
 
   watch: {
-    editorContent: function() {
-      this.editor.innerHTML = this.value
+    value (val) {
+      if (val !=  this.editor.innerHTML && !this.quill.hasFocus()) {
+        this.editor.innerHTML = val
+      }
     }
   },
 
   methods: {
-    saveContent: function(value) {
-      this.$emit('save-content', this.editor.innerHTML)
+    initializeVue2Editor() {
+      this.setQuillElement()
+      this.setEditorElement()
+      this.checkForInitialContent()
+    },
+
+    setQuillElement() {
+      this.quill = new Quill(this.$refs.quillContainer, {
+        modules: {
+          toolbar: this.toolbar
+        },
+        placeholder: this.placeholder ? this.placeholder : '',
+        theme: 'snow'
+      })
+    },
+
+    setEditorElement() {
+      this.editor = document.querySelector('.ql-editor')
+    },
+
+    checkForInitialContent() {
+      this.editor.innerHTML = this.value || ''
+    },
+
+    handleUpdatedEditor() {
+      this.quill.on('text-change', () => {
+        this.$emit('input', this.editor.innerHTML)
+      })
     }
   }
 }
@@ -120,7 +102,7 @@ export default {
   height: 400px;
 }
 
-/*svg {
+.ql-formats svg {
   position: absolute;
   left: 0;
   top: 0;
@@ -130,7 +112,7 @@ export default {
   fill: #4d4d4d;
 }
 
-button {
+.ql-formats button {
   position: relative;
   transition: all .2s ease;
   border-radius: 3px;
@@ -139,18 +121,15 @@ button {
   width: 31px !important;
 }
 
-button.ql-active {
-
-  background: #5b5b5b !important;
+.ql-formats button.ql-active {
 }
 
 .ql-active svg {
-
-    fill: #06c;
+  fill: #06c;
 }
 
 .ql-snow .ql-picker-options .ql-picker-item {
   position: relative;
   width: 100% !important;
-}*/
+}
 </style>
diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,14 @@
-import VueEditor from './VueEditor'
+/**
+ * Vue2-Editor
+ */
+import VueEditor from './VueEditor.vue'
 
-export {
-  VueEditor
+const Vue2Editor = {
+  VueEditor,
+  install: function(Vue) {
+    Vue.component(VueEditor.name, VueEditor)
+  }
 }
+
+export default Vue2Editor
+export { VueEditor }
diff --git a/webpack.config.dev.js b/webpack.config.dev.js
