Pchen0/electron

docs: add clipboard Fiddle examples (#20445)

* docs: add clipboard paste Fiddle example

* docs: add clipboard copy Fiddle example

* docs: add appropriate title to Fiddles

Co-Authored-By: John Kleinschmidt <[email protected]>

Rik Theunis 5 years ago

parent

d1c5c760d0

commit

ec87917f58

6 changed files with 117 additions and 0 deletions

Split View Show Diff Stats

						
							+ 24
							
							- 0
						
docs/fiddles/system/clipboard/copy/index.html
							 
								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
							
							- 0
						
docs/fiddles/system/clipboard/copy/main.js
							 
								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
							
							- 0
						
docs/fiddles/system/clipboard/copy/renderer.js
							 
								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
							
							- 0
						
docs/fiddles/system/clipboard/paste/index.html
							 
								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
							
							- 0
						
docs/fiddles/system/clipboard/paste/main.js
							 
								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
							
							- 0
						
docs/fiddles/system/clipboard/paste/renderer.js
							 
								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
			
				+})

docs: add clipboard Fiddle examples (#20445)

+ 24 - 0 docs/fiddles/system/clipboard/copy/index.html View File

+ 25 - 0 docs/fiddles/system/clipboard/copy/main.js View File

+ 10 - 0 docs/fiddles/system/clipboard/copy/renderer.js View File

+ 24 - 0 docs/fiddles/system/clipboard/paste/index.html View File

+ 25 - 0 docs/fiddles/system/clipboard/paste/main.js View File

+ 9 - 0 docs/fiddles/system/clipboard/paste/renderer.js View File

+ 24 - 0
docs/fiddles/system/clipboard/copy/index.html
View File

+ 25 - 0
docs/fiddles/system/clipboard/copy/main.js
View File

+ 10 - 0
docs/fiddles/system/clipboard/copy/renderer.js
View File

+ 24 - 0
docs/fiddles/system/clipboard/paste/index.html
View File

+ 25 - 0
docs/fiddles/system/clipboard/paste/main.js
View File

+ 9 - 0
docs/fiddles/system/clipboard/paste/renderer.js
View File