实现 “WebView2 获取word选中内容

1、主动

cs 复制代码
在 VSTO(Word 外接程序)中,你可以通过监听 Word 的选中事件,并主动把选中的内容传给 WebView2。WebView2 无法**主动访问** Word 的选中内容(它是独立运行的浏览器内核),所以需要在宿主控件(`UcWordAiTaskPane`)中**通过 C# 代码推送选中内容给 WebView2**。

### ✅ 实现思路如下:

---

### 🧩 第一步:监听 Word 的选中变化(SelectionChange)

在 `ThisAddIn.cs` 中注册事件:

```csharp
private void ThisAddIn_Startup(object sender, System.EventArgs e)
{
    this.Application.WindowSelectionChange += Application_WindowSelectionChange;
}
```

---

### 🧩 第二步:处理选中变化,获取选中文本,并传给 Uc 控件

```csharp
private void Application_WindowSelectionChange(Word.Selection Sel)
{
    string selectedText = Sel?.Text ?? "";
    
    // 找到当前任务窗格中的控件(你可能要根据文档或窗口关联获取正确的控件)
    foreach (CustomTaskPane pane in Globals.ThisAddIn.CustomTaskPanes)
    {
        if (pane.Control is UcWordAiTaskPane uc && pane.Visible)
        {
            uc.SendSelectedTextToWebView(selectedText);
        }
    }
}
```

---

### 🧩 第三步:`UcWordAiTaskPane` 中定义方法,将内容传给 WebView2

```csharp
public void SendSelectedTextToWebView(string text)
{
    string js = $"window.dispatchEvent(new CustomEvent('wordSelectionChanged', {{ detail: {System.Text.Json.JsonSerializer.Serialize(text)} }}));";
    
    webView21.ExecuteScriptAsync(js);
}
```

这样,WebView2 页面内就能监听 `wordSelectionChanged` 事件来处理:

---

### 🧩 第四步:WebView2 中 JavaScript 监听事件

```html
<script>
window.addEventListener("wordSelectionChanged", (e) => {
    const text = e.detail;
    console.log("选中的文本:", text);
    // 你可以做进一步的处理,如显示、分析、发送到服务器等
});
</script>
```

---

### ✅ 整体流程总结:

1. Word 中选中内容 => 触发 `WindowSelectionChange`
2. C# 获取选中内容 => 调用 WebView2 的 JS(通过 `ExecuteScriptAsync`)
3. JS 中监听事件并处理内容

---

如你还想支持**点击按钮刷新当前选中内容**,也可以通过按钮触发:

```csharp
var text = Globals.ThisAddIn.Application.Selection.Text;
uc.SendSelectedTextToWebView(text);
```

2、被动

cs 复制代码
## ✅ 实现方案概览

1. WebView2 中的网页按钮点击后,用 `window.chrome.webview.postMessage()` 向宿主发送请求。
2. VSTO C# 端在 `WebMessageReceived` 事件中捕获消息,获取 Word 当前选中的文本。
3. 用 `ExecuteScriptAsync` 把选中的文本返回给 WebView2 页面。

---

## 🧩 步骤一:Web 页面代码(嵌入 WebView2)

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AI 文档助手</title>
</head>
<body>
    <button id="getSelectionBtn">获取 Word 选中内容</button>
    <pre id="output"></pre>

    <script>
        // 点击按钮向 VSTO 发消息
        document.getElementById('getSelectionBtn').addEventListener('click', () => {
            window.chrome.webview.postMessage({ type: "getSelection" });
        });

        // 接收来自 VSTO 的响应
        window.addEventListener("wordSelectionChanged", (e) => {
            document.getElementById("output").textContent = e.detail;
        });
    </script>
</body>
</html>
```

---

## 🧩 步骤二:C# 中注册 WebView2 的消息监听事件

在 `UcWordAiTaskPane.cs` 中添加如下逻辑:

```csharp
public partial class UcWordAiTaskPane : UserControl
{
    public UcWordAiTaskPane()
    {
        InitializeComponent();

        webView21.CoreWebView2InitializationCompleted += WebView21_CoreWebView2InitializationCompleted;
    }

    private void WebView21_CoreWebView2InitializationCompleted(object sender, CoreWebView2InitializationCompletedEventArgs e)
    {
        if (webView21.CoreWebView2 != null)
        {
            webView21.CoreWebView2.WebMessageReceived += CoreWebView2_WebMessageReceived;
        }

        webView21.CoreWebView2.Navigate("your_local_or_embedded_page.html");
    }

    private void CoreWebView2_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
    {
        var message = e.WebMessageAsJson;

        // 简单判断消息类型
        if (message.Contains("\"type\":\"getSelection\""))
        {
            string selectedText = Globals.ThisAddIn.Application.Selection?.Text ?? "";
            SendSelectedTextToWebView(selectedText);
        }
    }

    public void SendSelectedTextToWebView(string text)
    {
        // 发送事件回网页,传回选中内容
        string escaped = System.Text.Json.JsonSerializer.Serialize(text); // 自动处理引号等
        string js = $"window.dispatchEvent(new CustomEvent('wordSelectionChanged', {{ detail: {escaped} }}));";
        webView21.ExecuteScriptAsync(js);
    }
}
```

---

## ✅ 效果
* Web 页点击按钮 ➜ 向宿主请求选中内容
* 宿主获取 Word 的选中文本 ➜ 回传给 Web 页
* Web 页展示选中内容(或用于其他用途)
相关推荐
fengfuyao9854 分钟前
基于MATLAB的GUI实现人脸检测、眼睛检测以及LBP直方图显示
开发语言·计算机视觉·matlab
★YUI★8 分钟前
学习游戏制作记录(玩家掉落系统,删除物品功能和独特物品)8.17
java·学习·游戏·unity·c#
CHANG_THE_WORLD21 分钟前
# C++ 中的 `string_view` 和 `span`:现代安全视图指南
开发语言·c++
Franklin43 分钟前
Python界面设计【QT-creator基础编程 - 01】如何让不同分辨率图像自动匹配graphicsView的窗口大小
开发语言·python·qt
谷宇.1 小时前
【Unity3D实例-功能-拔枪】角色拔枪(二)分割上身和下身
游戏·unity·c#·游戏程序·unity3d·游戏开发·游戏编程
郝学胜-神的一滴1 小时前
深入理解QFlags:Qt中的位标志管理工具
开发语言·c++·qt·程序人生
LZQqqqqo1 小时前
C# 中 ArrayList动态数组、List<T>列表与 Dictionary<T Key, T Value>字典的深度对比
windows·c#·list
柯南二号2 小时前
【Java后端】MyBatis-Plus 原理解析
java·开发语言·mybatis
我是哈哈hh2 小时前
【Node.js】ECMAScript标准 以及 npm安装
开发语言·前端·javascript·node.js
Sammyyyyy4 小时前
2025年,Javascript后端应该用 Bun、Node.js 还是 Deno?
开发语言·javascript·node.js