hi 想问下 前端的 sdk 可以在文档里添加自定义插件吗？ 比如 select 之类的

比如用户选中一段文本， 弹出一个选择框， 选择 item 后，帮助用户完成后续文档的编写

你好，可以监听WindowSelectionChange事件：文字事件监听-WindowSelectionChange 通过监听事件回调，自行实现前端UI交互

给各大网友提供个示例，顺便吐槽下官方文档的语焉不详资料以及官方不重视社区的维护 function createMousePositionDiv(id){ var mousePositionDiv = document.createElement('div'); mousePositionDiv.style.position = 'fixed';
mousePositionDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
mousePositionDiv.style.color = '#fff';
mousePositionDiv.style.padding = '5px';
mousePositionDiv.style.borderRadius = '5px';
//mousePositionDiv.style.width = "200px";
//mousePositionDiv.style.height = "13px";
//mousePositionDiv.style.bottom = '10px';
//mousePositionDiv.style.right = '10px';
document.body.appendChild(mousePositionDiv);
function setTipsPos(x,y){
mousePositionDiv.textContent = 'Mouse position: (' + x + ', ' + y + ')';
}
mousePositionDiv.id = id;
return mousePositionDiv;
}
let mousePositionDiv = createMousePositionDiv("mousePositionDiv");

instance.ApiEvent.AddApiEventListener('WindowSelectionChange', async(e) => { console.log('WindowSelectionChange: ', e);

const startPos = await instance.Application.ActiveDocument.ActiveWindow.Selection.GetPosByGcp(0);
const endPos = await instance.Application.ActiveDocument.ActiveWindow.Selection.GetPosByGcp(50);
const startPos_1 = await wpsInstance.Application.ActiveDocument.Selection.GetPosByGcp(1);
const startPos2 = await instance.Application.ActiveDocument.ActiveWindow.Selection.GetRelativePosByGcp(0);
const endPos2 = await instance.Application.ActiveDocument.ActiveWindow.Selection.GetRelativePosByGcp(50);
console.log("WindowSelectionChange GetPosByGcp","startPos:"+JSON.stringify(startPos)+", endPos:" + JSON.stringify(endPos),startPos_1);
console.log("WindowSelectionChange GetRelativePosByGcp","startPos:"+JSON.stringify(startPos2)+", endPos:" + JSON.stringify(endPos2));
let mousePositionDiv = document.getElementById("mousePositionDiv");
let pos = await getSelectionPos(instance);
let offsetX = 5;
//let offsetX = 0;
let offsetY = -75;
//let offsetY = 0;
let x = (pos.x);
let y = (pos.y);
mousePositionDiv.style.left = (x + offsetX) +"px";
mousePositionDiv.style.top = (y + offsetY)+"px";
mousePositionDiv.textContent = 'Mouse position: (' + (x + offsetX) + ', ' + (y + offsetY) + ')'; 
console.info("SelectionPos",pos)
const selectionCtrls = await getSelectionControl(instance);
console.info("当前选择的内容控件",selectionCtrls)

});

/**

• 获取所选区域文本的开始和结束的坐标 / async function getSelectionPos(instance){ /* * Step2 获取所选区域文本的开始和结束的坐标 * 获取区域内字符索引的坐标 * https://solution.wps.cn/docs/client/api/Word/Selection.html#getposbygcp / / 相对位置GetRelativePosByGcp / let range = await instance.Application.ActiveDocument.ActiveWindow.Selection.Range; let rangeStartIdx = await range.Start;
  let rangeEndIdx = await range.End;
  / 相对document.body位置 x,y / let relativeBodyPos = await instance.Application.ActiveDocument.ActiveWindow.Selection.GetRelativePosByGcp(rangeStartIdx); / 相对正文的坐标位置 X,Y / let relativeContentPos = await instance.Application.ActiveDocument.ActiveWindow.Selection.GetPosByGcp(rangeStartIdx); let pos = relativeBodyPos;
  console.info("相对document.body位置",relativeBodyPos,"相对正文位置",relativeContentPos);
  return {
  x: (pos.x ? pos.x : pos.X),
  y: (pos.y ? pos.y : pos.Y)
  }
  }
  /*

• 获取所选区域的内容控件 */ async function getSelectionControl(instance){ const contentControls = await instance.Application.ActiveDocument.ContentControls;
  const contentControlsCount = await contentControls.Count;
  let selectionRange = await instance.Application.ActiveDocument.ActiveWindow.Selection.Range;
  let selectionRangeStart = await selectionRange.Start;
  let selectionRangeEnd = await selectionRange.End;
  let result = [];
  for(let i = 0; i < contentControlsCount ; i++){
  const contentCtrl = await contentControls.Item(i+1);
  const contentCtrlRange = await contentCtrl.Range;
  const contentCtrlRangeStart = await contentCtrl.Range.Start;
  const contentCtrlRangeEnd = await contentCtrl.Range.End;

   if(selectionRangeStart == selectionRangeEnd && selectionRangeStart >= contentCtrlRangeStart && selectionRangeStart <= contentCtrlRangeEnd){
       /* 针对在页面单击某个区域，不属于选中某部分内容的场景 */
       result.push(contentCtrl);
   }else if(contentCtrlRangeStart >= selectionRangeStart && contentCtrlRangeEnd <= selectionRangeEnd){
       /* 针对在页面选中某部分内容的场景 */
       result.push(contentCtrl);
   }
  

  } return result; }