Browse Source

:bug: fix chrome set range bug

Van 6 years ago
parent
commit
d05284d7f5
4 changed files with 16 additions and 9 deletions
  1. 1 1
      demo/index.js
  2. 4 3
      src/ts/hint/getCursorPosition.ts
  3. 2 2
      src/ts/markdown/md2html.ts
  4. 9 3
      src/ts/wysiwyg/setRangeByWbr.ts

+ 1 - 1
demo/index.js

@@ -2,7 +2,7 @@ import Vditor from '../src/index'
 import '../src/assets/scss/classic.scss'
 
 window.vditor = new Vditor('vditor', {
-  // mode: "wysiwyg-show",
+  mode: "wysiwyg-show",
   typewriterMode: true,
   counter: 100,
   height: 300,

+ 4 - 3
src/ts/hint/getCursorPosition.ts

@@ -3,10 +3,11 @@ export const getCursorPosition = (editor: HTMLElement) => {
     const range = window.getSelection().getRangeAt(0);
     let cursorRect;
     if (range.getClientRects().length === 0) {
-        if (range.startContainer.childNodes[range.startOffset] &&
-            (range.startContainer.childNodes[range.startOffset] as HTMLElement).getClientRects().length > 0) {
+        const children = (range.startContainer as Element).children
+        if (children[range.startOffset] &&
+            children[range.startOffset].getClientRects().length > 0) {
             // markdown 模式回车
-            cursorRect = (range.startContainer.childNodes[range.startOffset] as HTMLElement).getClientRects()[0];
+            cursorRect = children[range.startOffset].getClientRects()[0];
         } else {
             cursorRect = (range.startContainer as HTMLElement).getClientRects()[0]; // <td></td>
         }

+ 2 - 2
src/ts/markdown/md2html.ts

@@ -10,8 +10,8 @@ export const loadLuteJs = async (vditor: IVditor | string) => {
     } else if (typeof vditor === "object" && vditor.options.cdn) {
         cdn = vditor.options.cdn;
     }
-    addScript(`${cdn}/dist/js/lute/lute.min.js`, "vditorLuteScript");
-    // addScript(`http://192.168.0.107:9090/lute.min.js?${new Date().getTime()}`, 'vditorLuteScript')
+    // addScript(`${cdn}/dist/js/lute/lute.min.js`, "vditorLuteScript");
+    addScript(`http://192.168.0.107:9090/lute.min.js?${new Date().getTime()}`, "vditorLuteScript");
 
     if (vditor && typeof vditor === "object" && !vditor.lute) {
         vditor.lute = Lute.New();

+ 9 - 3
src/ts/wysiwyg/setRangeByWbr.ts

@@ -17,13 +17,19 @@ export const setRangeByWbr = (element: HTMLElement, range: Range) => {
         if (wbrElement.previousElementSibling.isEqualNode(wbrElement.previousSibling)) {
             if (wbrElement.previousElementSibling.lastChild) {
                 // <em>text</em><wbr>
-                range.setStart(wbrElement.previousElementSibling.lastChild,
-                    wbrElement.previousElementSibling.lastChild.textContent.length);
+                range.setStartBefore(wbrElement);
+                setSelectionFocus(range);
+                // fix Chrome set range bug
+                if (wbrElement.previousElementSibling.tagName === "EM") {
+                    document.execCommand("italic", false, "");
+                } else if (wbrElement.previousElementSibling.tagName === "STRONG") {
+                    document.execCommand("bold", false, "");
+                }
+                return;
             } else {
                 // <br><wbr>
                 range.setStartAfter(wbrElement.previousElementSibling);
             }
-
         } else {
             // <em>text</em>text<wbr>
             range.setStart(wbrElement.previousSibling, wbrElement.previousSibling.textContent.length);