fix wrong html table bug

hifarer · Jul 28, 2017 · 06b5f2e · 06b5f2e
1 parent 69a7747
commit 06b5f2e
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 47 deletions.
diff --git a/dist/script/vueditor.min.js b/dist/script/vueditor.min.js
diff --git a/docs/changelog.md b/docs/changelog.md
@@ -5,6 +5,7 @@
 2. add preview to picture upload
 3. add type check for initialize config
 4. fix content sync bug when switch to source code view
+5. fix wrong html table bug.
 
 0.2.8
 

diff --git a/src/components/design.vue b/src/components/design.vue
@@ -126,39 +126,40 @@
           }, 200);
         }, false);
         if (!'onselectionchange' in document) {
-          let oSel = this.iframeWin.getSelection();
+          let sel = this.getSelection();
           let focusOffset = -1;
           setInterval(() => {
-            if (oSel && oSel.rangeCount) {
-              if (focusOffset !== oSel.focusOffset) {
-                focusOffset = oSel.focusOffset;
+            if (sel && sel.rangeCount) {
+              if (focusOffset !== sel.focusOffset) {
+                focusOffset = sel.focusOffset;
                 this.view === 'design' && this.updateStates();
               }
             } else {
-              oSel = this.iframeWin.getSelection();
+              sel = this.getSelection();
             }
           }, 200);
         }
       },
 
       exec (name, value) {
-        let range = this.getRange();
-        if (!range) return;
-        let container = range.commonAncestorContainer;
-        if(!this.$el.children[0].contains(container)){
-          return;
-        }
-        if (document.queryCommandSupported('styleWithCss')) {
-          this.iframeDoc.execCommand('styleWithCss', false, true);
+        if(this[name]){
+          this[name](name, value);
+        }else{
+          let sel = this.getSelection();
+          let range = this.getRange();
+          if (!sel || !range)return;
+          if (document.queryCommandSupported('styleWithCss')) {
+            this.iframeDoc.execCommand('styleWithCss', false, true);
+          }
+          this.iframeDoc.execCommand(name, false, value)
         }
-        this[name] ? this[name](name, value) : this.iframeDoc.execCommand(name, false, value);
         this.updateContent(this.iframeBody.innerHTML);
       },
 
       insertHTML (name, value) {
-        let oSel = this.iframeWin.getSelection();
-        let oRange = this.getRange();
-        if (!oRange)return;
+        let sel = this.getSelection();
+        let range = this.getRange();
+        if (!sel || !range)return;
         let node = null;
         let frag = this.iframeDoc.createDocumentFragment();
         let obj = this.iframeDoc.createElement('div');
@@ -167,17 +168,17 @@
           node = obj.firstChild;
           frag.appendChild(node);
         }
-        oRange.insertNode(frag);
-        oRange.setStartAfter(node);
-        oRange.collapse(true);
-        oSel.removeAllRanges();
-        oSel.addRange(oRange);
+        range.insertNode(frag);
+        range.setStartAfter(node);
+        range.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(range);
       },
 
       fontSize (name, value) {
-        let selection = this.iframeWin.getSelection();
+        let selection = this.getSelection();
         let range = this.getRange();
-        if (!range || range.collapsed) {
+        if (!selection || !range || range.collapsed) {
           return;
         }
         let childNodes = range.cloneContents().childNodes;
@@ -286,32 +287,31 @@
         container.normalize();
       },
 
+      getSelection () {
+        if(this.iframeWin.getSelection){
+          return this.iframeWin.getSelection();
+        }
+      },
+
       getRange () {
-        let oSel, oRange;
-        if (this.iframeWin.getSelection) {
-          oSel = this.iframeWin.getSelection();
-          if (oSel && oSel.rangeCount !== 0) {
-            oRange = oSel.getRangeAt(0);
-          }
+        let sel = this.getSelection(), range;
+        if (sel && sel.rangeCount !== 0) {
+          range = sel.getRangeAt(0);
         }
-        return oRange;
+        return range;
       },
 
       setRange (range) {
-        let oSel;
-        if (this.iframeWin.getSelection) {
-          oSel = this.iframeWin.getSelection();
-          oSel.removeAllRanges();
-          oSel.addRange(range);
+        let sel = this.getSelection();
+        if (sel) {
+          sel.removeAllRanges();
+          sel.addRange(range);
         }
       },
 
       removeRange () {
-        let oSel;
-        if (this.iframeWin.getSelection) {
-          oSel = this.iframeWin.getSelection();
-          oSel.removeAllRanges();
-        }
+        let sel = this.getSelection();
+        sel && sel.removeAllRanges();
       },
 
       rangeValid () {

diff --git a/src/components/table.vue b/src/components/table.vue
@@ -7,7 +7,7 @@
     z-index: 1000;
     background: #fff;
     border: 1px solid #ccc;
-    li a {
+    li {
       width: 20px;
       height: 20px;
       margin: 1px;
@@ -24,8 +24,7 @@
   <div class="ve-table" v-show="showPopup" :style="style">
     <ul>
       <!--Vue.js 2.0 v-for i start with 1-->
-      <li v-for="i in num" :key="i" @mouseover="overHandler(i-1)" @click="clickHandler(i-1)">
-        <a href="javascript:;" :class="{'active': ((i-1)%8 <= x && parseInt((i-1)/8) <= y)}"></a>
+      <li v-for="i in num" :key="i" @mouseover="overHandler(i - 1)" @click="clickHandler" :class="{'active': ((i - 1) % 8 <= x && parseInt((i - 1) / 8) <= y)}">
       </li>
     </ul>
   </div>
@@ -56,8 +55,8 @@
         this.x = index % 8;
         this.y = parseInt(index / 8);
       },
-      clickHandler (index) {
-        let html = this.createTable(this.x + 1, this.y + 1);
+      clickHandler () {
+        let html = this.createTable(this.y + 1, this.x + 1);
         this.$store.dispatch('execCommand', { name: 'insertHTML', value: html });
         this.$store.dispatch('updatePopupDisplay');
       },