给单元格的指定位置插入字符

当表格中有许多需要引用的参数时，我们会倾向于将其作为一个外部的表格引入来使用，但是在SpreadJS中想要给单元格的指定位置插入引用却不是那么的简单。


在点击外部表格时会由于焦点的变化，会导致单元格退出编辑状态，进而无法顺利将我们想要插入的引用插入到单元格的指定位置。

如下图：



进入编辑状态后，点击右侧的加号，打开外部表格进行引入操作。



在点击了外部的表格后，编辑状态就会退出。

此时，如果我们还想要实现插入的效果，就只能使用浏览器原生的光标API来实现这个需求。

整体的实现思路是：记录下插入的索引位置=》弹出外部表格并且获取要插入的值（或其他的数据，结合自己的业务场景来选择）=》通过API重新进入编辑状态=》根据之前记录下的索引位置插入需要插入的值。

最终的实现效果为下图：



实现源码：

1. window.onload = async () => {
   
2.   let designer, spread, sheet;
   
3. 
   
4.   let designerConfig = JSON.parse(
   
5.     JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig)
   
6.   );
   
7. 
   
8.   designer = new GC.Spread.Sheets.Designer.Designer(
   
9.     "gc-designer-container",
   
10.     designerConfig
    
11.   );
    
12. 
    
13.   spread = designer.getWorkbook();
    
14. 
    
15.   sheet = spread.getActiveSheet();
    
16. 
    
17.   let cursorPos = -1;
    
18.   sheet.bind(GC.Spread.Sheets.Events.EditStarting, (e, info) => {
    
19.     let editor = document.querySelector("div[gcuielement='gcEditingInput']");
    
20.     editor.addEventListener("click", () => {
    
21.       getCursorIndex(editor);
    
22.     });
    
23.   });
    
24. 
    
25.   let style = new GC.Spread.Sheets.Style();
    
26.   style.cellButtons = [
    
27.     {
    
28.       imageType: GC.Spread.Sheets.ButtonImageType.plus,
    
29.       command: (sheet, row, col, option) => {
    
30.         let div = document.createElement("div");
    
31.         div.className = "testDiv";
    
32.         div.style.border = "3px solid red";
    
33.         div.style.x = "300px";
    
34.         div.style.y = "300px";
    
35.         div.style.display = "block";
    
36.         div.style.position = "absolute";
    
37.         div.style.width = "500px";
    
38.         div.style.height = "500px";
    
39.         div.setAttribute("gcUIElement", "gcEditingInput");
    
40. 
    
41.         let button = document.createElement("button");
    
42.         button.innerText = "确定";
    
43.         button.style.position = "absolute";
    
44.         button.style.right = "0";
    
45.         button.style.top = "0";
    
46.         button.style.width = "100px";
    
47.         button.style.height = "30px";
    
48. 
    
49.         div.appendChild(button);
    
50. 
    
51.         sheet.getParent().getHost().appendChild(div);
    
52. 
    
53.         let newSpread = new GC.Spread.Sheets.Workbook(
    
54.           document.querySelector(".testDiv"),
    
55.           { sheetCount: 1 }
    
56.         );
    
57. 
    
58.         let newSheet = newSpread.getActiveSheet();
    
59. 
    
60.         button.addEventListener("click", () => {
    
61.           if (cursorPos == -1) {
    
62.             cursorPos = sheet.getValue(
    
63.               sheet.getActiveRowIndex(),
    
64.               sheet.getActiveColumnIndex()
    
65.             ).length;
    
66.             console.log("cursorPos == -1", cursorPos);
    
67.           }
    
68. 
    
69.           let selection = newSheet.getSelections()[0];
    
70.           console.log(selection);
    
71. 
    
72.           sheet.getParent().getHost().removeChild(div);
    
73.           newSpread.destroy();
    
74. 
    
75.           sheet.startEdit();
    
76.           let gcEditingInput = document.querySelector(
    
77.             "div[gcuielement='gcEditingInput']"
    
78.           );
    
79.           moveCursorToIndex(gcEditingInput, cursorPos);
    
80.           insertAtCursorInDiv("INSERT");
    
81.         });
    
82.       },
    
83.     },
    
84.   ];
    
85.   sheet.setStyle(0, 0, style);
    
86.   sheet.setValue(0, 0, "Test");
    
87. 
    
88.   function getCursorIndex(editor) {
    
89.     const selection = window.getSelection();
    
90.     const range = selection.getRangeAt(0);
    
91.     const preCaretRange = range.cloneRange();
    
92.     preCaretRange.selectNodeContents(editor);
    
93.     preCaretRange.setEnd(range.endContainer, range.endOffset);
    
94.     cursorPos = preCaretRange.toString().length;
    
95.     console.log(`光标位置: ${cursorPos}`);
    
96.   }
    
97. 
    
98.   function moveCursorToIndex(div, index) {
    
99.     let currentIndex = 0;
    
100.     let targetNode = div.firstChild.childNodes[0].firstChild;
     
101. 
     
102.     if (targetNode.textContent == "=") {
     
103.       for (let i = 0; i < div.firstChild.childNodes.length; i++) {
     
104.         let node = div.firstChild.childNodes[i];
     
105.         let nodeTextLength = node.textContent.length;
     
106. 
     
107.         if (currentIndex + nodeTextLength > index) {
     
108.           targetNode = node;
     
109.           break;
     
110.         }
     
111.         currentIndex += nodeTextLength;
     
112.       }
     
113.     }
     
114. 
     
115.     let range = document.createRange();
     
116.     let offset = index - currentIndex;
     
117.     range.setStart(targetNode, offset);
     
118.     range.setEnd(targetNode, offset);
     
119.     let selection = document.getSelection();
     
120.     selection.removeAllRanges();
     
121.     selection.addRange(range);
     
122.   }
     
123. 
     
124.   function insertAtCursorInDiv(string) {
     
125.     let selection = document.getSelection();
     
126.     let textNode = document.createTextNode(string);
     
127.     selection.getRangeAt(0).insertNode(textNode);
     
128.     selection.collapseToEnd();
     
129.   }
     
130. };

复制代码