Electronページ内の検索モジュールの説明

概要
Electron appページ内でキーワードで一致するテキストを検索する機能を実現
とくせい

Electron依存findInPage API

は、ユーザがUIインタフェース

を柔軟に構成することをサポートする.

は大文字と小文字の区別をサポートする

ユーザ入力時に自動的に検索

入力ボックスのテキスト分離を検索し、

に一致しません.

は、次のElectronバージョン^1.8.7、^2.0.0、^3.0.0、^4.0.0

をサポートします.

は以下のプラットフォームWindows、Linux、Mac

をサポートする
デモ
デフォルトUI
カスタマイズUI
インストール

$   npm install electron-find --save

使用

#     
import { remote, ipcRenderer } from 'electron'
import { FindInPage } from 'electron-find'

#            
let findInPage = new FindInPage(remote.getCurrentWebContents())
findInPage.openFindWindow()

#        ，                  dom
let findInPage = new FindInPage(remote.getCurrentWebContents(), {
  preload: true
})
findInPage.openFindWindow()

#        ,     document.body
let findInPage = new FindInPage(remote.getCurrentWebContents(), {
  parentElement: document.querySelector('#id')
})
findInPage.openFindWindow()

#                 ,     300 (ms)
let findInPage = new FindInPage(remote.getCurrentWebContents(), {
  duration: 200
})
findInPage.openFindWindow()

#                    
let findInPage = new FindInPage(remote.getCurrentWebContents(), {
  offsetTop: 20,
  offsetRight: 30
})
findInPage.openFindWindow()

#    UI    
let findInPage = new FindInPage(remote.getCurrentWebContents(), {
  boxBgColor: '#333',
  boxShadowColor: '#000',
  inputColor: '#aaa',
  inputBgColor: '#222',
  inputFocusColor: '#555',
  textColor: '#aaa',
  textHoverBgColor: '#555',
  caseSelectedColor: '#555'
})
findInPage.openFindWindow()

#   demo
npm install
npm run e

ショートカットキー
Enter:次のShift+Enterを検索:前のEscを検索:ウィンドウを閉じる
また、demoを参照して、グローバルショートカットキーを使用してウィンドウを開くこともできます.
API
クラス:FindInPage new FindInPage(webContents, [options])

webContents Object-レンダリングプロセスのwebContentsオブジェクト

options Object(optional)

preload Boolean-インスタンスを作成するときに検索ウィンドウを事前にロードするかどうか.デフォルトはfalseです.

parentElement Object-検索ウィンドウの親ノードを指定します.デフォルトはdocument.bodyです.

duration Number-検索ウィンドウの表示または非表示の遷移期間を指定します.デフォルトは300(ms)です.

offsetTop Number-親位置要素の上部に対する検索ウィンドウのオフセットを指定します.デフォルトは5です.

offsetRight Number-親位置要素に対する検索ウィンドウの右側のオフセットを指定します.デフォルトは5です.

boxBgColor String-ルックアップウィンドウの背景色を設定します.デフォルトは"#ffffff"です.

boxShadowColor String-ルックアップウィンドウのシャドウカラーを設定します.デフォルトは"#909399"です.

inputColor String-入力ボックスのテキスト色を設定します.デフォルトは「#606266」です.

inputBgColor String-入力ボックスの背景色を設定します.デフォルトは"#f0f0f0"です.

inputFocusColor String-入力ボックスのフォーカス時の枠線色を設定します.デフォルトは"#c5ade0"です.

textColor String-検索ウィンドウのテキスト色を設定します.デフォルトは"#606266"です.

textHoverBgColor String-マウスがテキストを停止するときの背景色を設定します.デフォルトは"#eaeaea"です.

caseSelectedColor String-大文字と小文字を区別するオプションを選択したときの枠線の色を設定します.デフォルトは"#c5ade0"です.

インスタンスメソッド
new FindInPageを使用して作成されたインスタンスには、 findInPage.openFindWindow() が検索ウィンドウを閉じると、ウィンドウを開く方法があります.検索ウィンドウが開いている場合は、入力ボックスにフォーカスします. findInPage.closeFindWindow() ウィンドウを閉じます. findInPage.destroy() ウィンドウを閉じ、オブジェクトの参照をクリアし、メモリを解放します.詳細:https://github.com/TheoXiong/electron-find