字玩FontPlayer开发笔记11 Tauri2剪切板模块

字玩FontPlayer开发笔记11 Tauri2剪切板模块

字玩FontPlayer是笔者开源的一款字体设计工具，使用Vue3 + ElementUI开发，源代码：github | gitee

笔记

浏览器默认的复制粘贴功能在Tauri应用中是禁用的，对于复制粘贴操作需要使用Tauri自带的插件进行处理。

安装插件

npm run tauri add clipboard-manager

权限配置

使用剪切板插件需要开启权限：
src-tauri/capabilities/default.json

{
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "default",
  "description": "enables the default permissions",
  "windows": [
    "main",
    "glyph-script"
  ],
  "remote": {
    "urls": [
      "https://*.tauri.app"
    ]
  },
  "permissions": [
    //...
    "clipboard-manager:allow-read-text",
    "clipboard-manager:allow-write-text",
    //...
  ]
}

写入剪切板

import { writeText, readText } from '@tauri-apps/plugin-clipboard-manager'

await writeText(selectedText)

读取剪切板

import { writeText, readText } from '@tauri-apps/plugin-clipboard-manager'

const clipboardText = await readText()

监听复制粘贴事件

笔者项目使用CodeMirror代码编辑器，CodeMirror可以直接获取编辑器dom，通过对dom按键事件监听，进行复制粘贴功能的实现。

import { writeText, readText } from '@tauri-apps/plugin-clipboard-manager'

const isMac = navigator.userAgent.includes("Mac")

// 监听按键事件
codeEditor.dom.addEventListener("keydown", async (event) => {
  // 监听复制：Ctrl+C 或 Command+C
  if ((isMac ? event.metaKey : event.ctrlKey) && event.key === "c") {
    const { from, to } = codeEditor.state.selection.main
    const selectedText = codeEditor.state.doc.slice(from, to).toString()

    if (selectedText) {
      // 将选中的文本写入剪贴板
      await writeText(selectedText)
    }

    event.preventDefault()
  }

  // 监听粘贴：Ctrl+V 或 Command+V
  if ((isMac ? event.metaKey : event.ctrlKey) && event.key === "v") {
    const clipboardText = await readText() // 从剪贴板读取文本

    if (clipboardText) {
      const { from } = codeEditor.state.selection.main
      const transaction = codeEditor.state.update({
        changes: { from, insert: clipboardText }, // 插入剪贴板内容
      })
      codeEditor.dispatch(transaction) // 执行插入
    }

    event.preventDefault()
  }
})