Skip to content

Instantly share code, notes, and snippets.

@Largo

Largo/index.html

Forked from anonymous/index.html
Created January 22, 2016 14:58
Show Gist options
  • Save Largo/948778f3381754d50a21 to your computer and use it in GitHub Desktop.
Save Largo/948778f3381754d50a21 to your computer and use it in GitHub Desktop.
Download ZIP
Editor // source http://jsbin.com/yinuyu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>Editor</title>
<style id="jsbin-css">
* { box-sizing: border-box }
body {
margin: 0;
padding: 0;
background-color: #f5f6f6;
color: #424242;
font-family: 'Inconsolata', Arial;
font-size: 20px;
letter-spacing: 0.0625em;
/*-webkit-text-fill-color: #424242;
can be used to change caret color on webkit
*/
}
editor {
display: block;
min-height: 100vh;
width: 100%;
padding: 20px 20%;
outline: 0;
margin: 0 auto;
}
</style>
</head>
<body >
<editor contenteditable="true"></editor>
<script id="jsbin-javascript">
var editorText = localStorage.getItem('editorText');
if (editorText == null) {
editorText = 'Write something here. It will get saved automatically';
}
$('editor').html(editorText);
var saveEditor = function() {
localStorage.setItem('editorText', $('editor').html());
setTimeout(saveEditor, 2000);
};
saveEditor();
$( "editor" ).change(function() {
/* $("body *:not(strong)").each(function() {
$(this).wrap('<strong />');
}); */
});
// should optimized later maybe
$('[contenteditable]').on('focus', function() {
var $this = $(this);
$this.data('before', $this.html());
return $this;
}).on('blur keyup paste', function() {
var $this = $(this);
if ($this.data('before') !== $this.html()) {
$this.data('before', $this.html());
$this.trigger('change');
}
return $this;
});
function placeCaretAtEnd(el) {
el.focus();
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
}
placeCaretAtEnd($("editor")[0] );
$("editor").focus();
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
<script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script>
<meta charset="utf-8">
<title>Editor</title>
</head>
<body >
<editor contenteditable="true"></editor>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">* { box-sizing: border-box }
body {
margin: 0;
padding: 0;
background-color: #f5f6f6;
color: #424242;
font-family: 'Inconsolata', Arial;
font-size: 20px;
letter-spacing: 0.0625em;
/*-webkit-text-fill-color: #424242;
can be used to change caret color on webkit
*/
}
editor {
display: block;
min-height: 100vh;
width: 100%;
padding: 20px 20%;
outline: 0;
margin: 0 auto;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var editorText = localStorage.getItem('editorText');
if (editorText == null) {
editorText = 'Write something here. It will get saved automatically';
}
$('editor').html(editorText);
var saveEditor = function() {
localStorage.setItem('editorText', $('editor').html());
setTimeout(saveEditor, 2000);
};
saveEditor();
$( "editor" ).change(function() {
/* $("body *:not(strong)").each(function() {
$(this).wrap('<strong />');
}); */
});
// should optimized later maybe
$('[contenteditable]').on('focus', function() {
var $this = $(this);
$this.data('before', $this.html());
return $this;
}).on('blur keyup paste', function() {
var $this = $(this);
if ($this.data('before') !== $this.html()) {
$this.data('before', $this.html());
$this.trigger('change');
}
return $this;
});
function placeCaretAtEnd(el) {
el.focus();
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
}
placeCaretAtEnd($("editor")[0] );
$("editor").focus();
</script></body>
</html>
Raw
jsbin.yinuyu.css
* { box-sizing: border-box }
body {
margin: 0;
padding: 0;
background-color: #f5f6f6;
color: #424242;
font-family: 'Inconsolata', Arial;
font-size: 20px;
letter-spacing: 0.0625em;
/*-webkit-text-fill-color: #424242;
can be used to change caret color on webkit
*/
}
editor {
display: block;
min-height: 100vh;
width: 100%;
padding: 20px 20%;
outline: 0;
margin: 0 auto;
}
Raw
jsbin.yinuyu.js
var editorText = localStorage.getItem('editorText');
if (editorText == null) {
editorText = 'Write something here. It will get saved automatically';
}
$('editor').html(editorText);
var saveEditor = function() {
localStorage.setItem('editorText', $('editor').html());
setTimeout(saveEditor, 2000);
};
saveEditor();
$( "editor" ).change(function() {
/* $("body *:not(strong)").each(function() {
$(this).wrap('<strong />');
}); */
});
// should optimized later maybe
$('[contenteditable]').on('focus', function() {
var $this = $(this);
$this.data('before', $this.html());
return $this;
}).on('blur keyup paste', function() {
var $this = $(this);
if ($this.data('before') !== $this.html()) {
$this.data('before', $this.html());
$this.trigger('change');
}
return $this;
});
function placeCaretAtEnd(el) {
el.focus();
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
}
placeCaretAtEnd($("editor")[0] );
$("editor").focus();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment