Tạo và Cấu hình Menu Chuột Phải trong Electron với electron-context-menu

electron-context-menu là một giải pháp mạnh mẽ cho menu chuột phải trong ứng dụng Electron, cung cấp các tính năng dễ sử dụng và có thể tùy chỉnh cao. Công cụ này giúp bạn tạo ra trải nghiệm tương tác chuyên nghiệp cho ứng dụng của mình, từ thao tác văn bản, xử lý hình ảnh đến quản lý liên kết.

Tại sao nên chọn electron-context-menu?

Khung Electron không cung cấp sẵn tính năng menu chuột phải, do đó, nhà phát triển cần tự thực hiện. electron-context-menu giải quyết vấn đề này bằng cách cung cấp các chức năng cơ bản như cắt, sao chép, dán, cũng như các tính năng nâng cao như lưu hình ảnh, sao chép liên kết, kiểm tra chính tả, và hỗ trợ tùy chỉnh hoàn toàn.

Các ưu điểm chính

• Sẵn sàng sử dụng: Chỉ cần cấu hình đơn giản để có được menu chuột phải đầy đủ.
• Có thể tùy chỉnh cao: Hỗ trợ thêm các mục menu tùy chỉnh trước hoặc sau menu mặc định.
• Nhận diện thông minh: Tự động nhận diện loại phần tử (văn bản, hình ảnh, liên kết) và hiển thị các tùy chọn tương ứng.
• Dễ dàng phát triển: Có tùy chọn "Kiểm tra phần tử" để thuận tiện cho việc gỡ lỗi.
• Hỗ trợ đa nền tảng: Hoạt động tốt trên Windows, macOS, và Linux.

Bắt đầu nhanh: Cài đặt và cấu hình cơ bản

Cài đặt

Cài đặt electron-context-menu bằng npm hoặc yarn:

npm install electron-context-menu

Lưu ý: Gói này yêu cầu phiên bản Electron 30 hoặc cao hơn.

Ví dụ sử dụng cơ bản

Trong quá trình khởi tạo ứng dụng Electron, hãy nhập và khởi tạo electron-context-menu:

import { app, BrowserWindow } from 'electron';
import contextMenu from 'electron-context-menu';

// Cấu hình cơ bản
contextMenu({
  showSaveImageAs: true  // Kích hoạt tính năng "Lưu hình ảnh"
});

// Tạo cửa sổ
let mainWindow;
(async () => {
  await app.whenReady();
  mainWindow = new BrowserWindow();
})();

Với cấu hình đơn giản trên, ứng dụng của bạn đã có đầy đủ chức năng menu chuột phải, bao gồm thao tác văn bản, xử lý hình ảnh, và quản lý liên kết.

Cấu hình nâng cao: Tạo menu chuột phải cá nhân hóa

electron-context-menu cung cấp nhiều tùy chọn cấu hình để bạn có thể tùy chỉnh menu theo nhu cầu của ứng dụng.

Thêm mục menu tùy chỉnh

Bạn có thể thêm các mục menu tùy chỉnh trước hoặc sau menu mặc định bằng cách sử dụng prepend và append:

contextMenu({
  prepend: (defaultActions, parameters) => [
    {
      label: 'Tìm kiếm nội dung đã chọn',
      visible: parameters.selectionText.trim().length > 0,
      click: () => {
        require('electron').shell.openExternal(`https://google.com/search?q=${encodeURIComponent(parameters.selectionText)}`);
      }
    }
  ]
});

Cấu hình hiển thị chức năng

Bạn có thể điều khiển chính xác các chức năng nào sẽ hiển thị trong menu chuột phải:

contextMenu({
  showSaveImageAs: true,        // Hiển thị "Lưu hình ảnh"
  showCopyImageAddress: true,   // Hiển thị "Sao chép địa chỉ hình ảnh"
  showCopyLink: true,           // Hiển thị "Sao chép liên kết"
  showInspectElement: true,     // Luôn hiển thị "Kiểm tra phần tử"
  showSelectAll: true           // Hiển thị "Chọn tất cả"
});

Hỗ trợ quốc tế hóa

Để quốc tế hóa văn bản menu, sử dụng tùy chọn labels:

contextMenu({
  labels: {
    copy: 'Sao chép',
    saveImageAs: 'Lưu hình ảnh thành...',
    lookUpSelection: 'Tra cứu "{selection}"'
  }
});

Chi tiết về các chức năng hữu ích

Chức năng thao tác văn bản

electron-context-menu cung cấp đầy đủ chức năng thao tác văn bản, bao gồm:

• Cắt/ Sao chép/ Dán: Thao tác văn bản tiêu chuẩn
• Tìm kiếm nội dung đã chọn: Hiển thị định nghĩa trên macOS
• Tìm kiếm Google: Tìm kiếm nhanh nội dung đã chọn
• Chọn tất cả: Chọn tất cả nội dung trang
• Kiểm tra chính tả: Nhận diện lỗi chính tả và đưa ra gợi ý

Chức năng xử lý phương tiện

Đối với các phần tử phương tiện như hình ảnh và video, cung cấp các tùy chọn thao tác phong phú:

• Sao chép hình ảnh: Sao chép hình ảnh vào clipboard
• Lưu hình ảnh: Lưu hình ảnh trực tiếp
• Lưu hình ảnh thành: Chọn đường dẫn để lưu hình ảnh
• Sao chép địa chỉ hình ảnh: Lấy URL của hình ảnh
• Sao chép địa chỉ video: Lấy URL của video

Chức năng thao tác liên kết

Đối với các phần tử liên kết, hỗ trợ:

• Sao chép liên kết: Sao chép địa chỉ liên kết
• Lưu liên kết thành: Tải xuống tài nguyên được liên kết

Mẹo nâng cao: Menu dựa trên ngữ cảnh

Dùng shouldShowMenu để quyết định động xem có hiển thị menu hay không dựa trên ngữ cảnh hiện tại:

contextMenu({
  shouldShowMenu: (event, parameters) => !parameters.isEditable
});

Tùy chỉnh hoàn toàn cấu trúc menu

Đối với nhu cầu phức tạp, sử dụng menu để tùy chỉnh hoàn toàn cấu trúc menu:

contextMenu({
  menu: (actions, props) => [
    actions.separator(),
    actions.copyLink(),
    actions.separator(),
    { label: 'Mục menu tùy chỉnh' },
    actions.separator(),
    actions.copy()
  ]
});

Kết luận

electron-context-menu cung cấp giải pháp menu chuột phải chuyên nghiệp và linh hoạt cho ứng dụng Electron. Dù là thao tác văn bản đơn giản hay nhu cầu tùy chỉnh phức tạp, công cụ này đều có thể đáp ứng. Với các tùy chọn cấu hình và mẹo nâng cao được giới thiệu, bạn có thể tạo ra menu chuột phải phù hợp với phong cách ứng dụng của mình, nâng cao trải nghiệm người dùng.

Để biết thêm thông tin hoặc tham gia phát triển dự án, hãy clone kho dự án:

git clone https://gitcode.com/gh_mirrors/el/electron-context-menu

Hãy thử electron-context-menu ngay hôm nay để thêm trải nghiệm tương tác chuyên nghiệp cho ứng dụng Electron của bạn!