Created
January 22, 2016 14:58
-
-
Save anonymous/69435600b6247b3c180a to your computer and use it in GitHub Desktop.
Editor // source http://jsbin.com/yinuyu
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> | |
| <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> |
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
| * { 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; | |
| } |
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
| 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