Created
April 18, 2018 17:17
-
-
Save Eccenux/14b1ceb5a111cd5b9a3aa43d9655c87a to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/bilafebexe
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| .editarea { | |
| border: 1px solid black; | |
| background: white; | |
| width: 100%; | |
| height: 5em; | |
| box-sizing: border-box; | |
| margin: 1em 0; | |
| padding: .5em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h2>textarea</h2> | |
| <div class="actions" data-for="textarea"> | |
| <button data-el="b">Bold</button> | |
| <button data-el="i">Italic</button> | |
| </div> | |
| <textarea class="editarea" | |
| >Some text.</textarea> | |
| <h2>contenteditable</h2> | |
| <div class="actions" data-for="pre"> | |
| <button data-el="b">Bold</button> | |
| <button data-el="i">Italic</button> | |
| </div> | |
| <pre contenteditable="true" class="editarea" | |
| >Some text.</pre> | |
| <script id="jsbin-javascript"> | |
| // prepare action-buttons | |
| var buttonContainers = document.querySelectorAll('.actions'); | |
| buttonContainers.forEach(function(buttonContainer){ | |
| var buttons = buttonContainer.querySelectorAll('button'); | |
| var pasteTarget = buttonContainer.getAttribute('data-for'); | |
| buttons.forEach(function(button){ | |
| var elementName = button.getAttribute('data-el'); | |
| button.onclick = function() { | |
| insertText('<'+elementName+'></'+elementName+'>', pasteTarget); | |
| }; | |
| }); | |
| }); | |
| // | |
| // Inserts text at cursor | |
| // (or replaces selected text). | |
| function insertText(newText, textarea) | |
| { | |
| if (typeof textarea === 'string') { | |
| textarea = document.querySelector(textarea); | |
| } | |
| textarea.focus(); | |
| // attempting to paste to preserver undo functionality | |
| var pasted = true; | |
| try { | |
| //textarea.focus(); | |
| if (!document.execCommand("insertText", false, newText)) { | |
| pasted = false; | |
| } | |
| } catch (e) { | |
| console.error('error caught:', e); | |
| pasted = false; | |
| } | |
| // fallback | |
| if (!pasted) { | |
| console.error('paste unsuccessful, execCommand not supported'); | |
| } | |
| } | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">.editarea { | |
| border: 1px solid black; | |
| background: white; | |
| width: 100%; | |
| height: 5em; | |
| box-sizing: border-box; | |
| margin: 1em 0; | |
| padding: .5em; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">// prepare action-buttons | |
| var buttonContainers = document.querySelectorAll('.actions'); | |
| buttonContainers.forEach(function(buttonContainer){ | |
| var buttons = buttonContainer.querySelectorAll('button'); | |
| var pasteTarget = buttonContainer.getAttribute('data-for'); | |
| buttons.forEach(function(button){ | |
| var elementName = button.getAttribute('data-el'); | |
| button.onclick = function() { | |
| insertText('<'+elementName+'></'+elementName+'>', pasteTarget); | |
| }; | |
| }); | |
| }); | |
| // | |
| // Inserts text at cursor | |
| // (or replaces selected text). | |
| function insertText(newText, textarea) | |
| { | |
| if (typeof textarea === 'string') { | |
| textarea = document.querySelector(textarea); | |
| } | |
| textarea.focus(); | |
| // attempting to paste to preserver undo functionality | |
| var pasted = true; | |
| try { | |
| //textarea.focus(); | |
| if (!document.execCommand("insertText", false, newText)) { | |
| pasted = false; | |
| } | |
| } catch (e) { | |
| console.error('error caught:', e); | |
| pasted = false; | |
| } | |
| // fallback | |
| if (!pasted) { | |
| console.error('paste unsuccessful, execCommand not supported'); | |
| } | |
| }</script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .editarea { | |
| border: 1px solid black; | |
| background: white; | |
| width: 100%; | |
| height: 5em; | |
| box-sizing: border-box; | |
| margin: 1em 0; | |
| padding: .5em; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // prepare action-buttons | |
| var buttonContainers = document.querySelectorAll('.actions'); | |
| buttonContainers.forEach(function(buttonContainer){ | |
| var buttons = buttonContainer.querySelectorAll('button'); | |
| var pasteTarget = buttonContainer.getAttribute('data-for'); | |
| buttons.forEach(function(button){ | |
| var elementName = button.getAttribute('data-el'); | |
| button.onclick = function() { | |
| insertText('<'+elementName+'></'+elementName+'>', pasteTarget); | |
| }; | |
| }); | |
| }); | |
| // | |
| // Inserts text at cursor | |
| // (or replaces selected text). | |
| function insertText(newText, textarea) | |
| { | |
| if (typeof textarea === 'string') { | |
| textarea = document.querySelector(textarea); | |
| } | |
| textarea.focus(); | |
| // attempting to paste to preserver undo functionality | |
| var pasted = true; | |
| try { | |
| //textarea.focus(); | |
| if (!document.execCommand("insertText", false, newText)) { | |
| pasted = false; | |
| } | |
| } catch (e) { | |
| console.error('error caught:', e); | |
| pasted = false; | |
| } | |
| // fallback | |
| if (!pasted) { | |
| console.error('paste unsuccessful, execCommand not supported'); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment