mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

docs: add clipboard Fiddle examples (#20445)

Browse source 
* docs: add clipboard paste Fiddle example

* docs: add clipboard copy Fiddle example

* docs: add appropriate title to Fiddles

Co-Authored-By: John Kleinschmidt <jkleinsc@github.com>
This commit is contained in:
Rik Theunis 2019-10-10 15:48:33 +02:00 committed by John Kleinschmidt
parent d1c5c760d0
commit ec87917f58
6 changed files with 117 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
docs/fiddles/system/clipboard/copy/index.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<div>
<h1>Clipboard copy</h1>
<i>Supports: Win, macOS, Linux <span>|</span> Process: Both</i>
<div>
<div>
<button id="copy-to">Copy</button>
<input id="copy-to-input" aria-label="Click copy" placeholder="Click copy."></input>
</div>
<p>In this example we copy a phrase to the clipboard. After clicking 'Copy' use the text area to paste (CMD + V or CTRL + V) the phrase from the clipboard.</p>
</div>
</div>
</div>
</body>
<script>
require('./renderer.js')
</script>
</html>

25
docs/fiddles/system/clipboard/copy/main.js Normal file
View file

@ -0,0 +1,25 @@
const { app, BrowserWindow } = require('electron')
let mainWindow = null
function createWindow () {
const windowOptions = {
width: 600,
height: 400,
title: 'Clipboard copy',
webPreferences: {
nodeIntegration: true
}
}
mainWindow = new BrowserWindow(windowOptions)
mainWindow.loadFile('index.html')
mainWindow.on('closed', () => {
mainWindow = null
})
}
app.on('ready', () => {
createWindow()
})

10
docs/fiddles/system/clipboard/copy/renderer.js Normal file
View file

@ -0,0 +1,10 @@
const { clipboard } = require('electron')
const copyBtn = document.getElementById('copy-to')
const copyInput = document.getElementById('copy-to-input')
copyBtn.addEventListener('click', () => {
if (copyInput.value !== '') copyInput.value = ''
copyInput.placeholder = 'Copied! Paste here to see.'
clipboard.writeText('Electron Demo!')
})

24
docs/fiddles/system/clipboard/paste/index.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<div>
<h1>Clipboard paste</h1>
<i>Supports: Win, macOS, Linux <span>|</span> Process: Both</i>
<div>
<div>
<button id="paste-to">Paste</button>
<span id="paste-from"></span>
</div>
<p>In this example we copy a string to the clipboard and then paste the results into a message above.</p>
</div>
</div>
</div>
</body>
<script>
require('./renderer.js')
</script>
</html>

25
docs/fiddles/system/clipboard/paste/main.js Normal file
View file

@ -0,0 +1,25 @@
const { app, BrowserWindow } = require('electron')
let mainWindow = null
function createWindow () {
const windowOptions = {
width: 600,
height: 400,
title: 'Clipboard paste',
webPreferences: {
nodeIntegration: true
}
}
mainWindow = new BrowserWindow(windowOptions)
mainWindow.loadFile('index.html')
mainWindow.on('closed', () => {
mainWindow = null
})
}
app.on('ready', () => {
createWindow()
})

9
docs/fiddles/system/clipboard/paste/renderer.js Normal file
View file

@ -0,0 +1,9 @@
const { clipboard } = require('electron')
const pasteBtn = document.getElementById('paste-to')
pasteBtn.addEventListener('click', () => {
clipboard.writeText('What a demo!')
const message = `Clipboard contents: ${clipboard.readText()}`
document.getElementById('paste-from').innerHTML = message
})