Skip to content

Instantly share code, notes, and snippets.

@Eccenux Eccenux/index.html
Created Apr 18, 2018

Embed
What would you like to do?
JS Bin // source http://jsbin.com/baxusiw
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<meta name="description"
content="execCommand and undo testing">
<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>
.editarea {
border: 1px solid black;
background: white;
width: 100%;
height: 5em;
box-sizing: border-box;
margin: 1em 0;
padding: .5em;
}
// 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
You can’t perform that action at this time.