nhoizey/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Following this coderwall protip and its comments, here is my own attempt at providing a simple way to edit a text in the browser.

  
## editor.js
(function () {
    var text = '',
        data_uri = '';
    if (typeof window.getSelection != 'undefined') {
      text = window.getSelection().toString();
    } else if (typeof document.selection != 'undefined' && document.selection.type == 'Text') {
      text = document.selection.createRange().text;
    }
    console.log('Editing this text: ' + text);
    data_uri = '<html><head><title>Editor</title><style>';
    data_uri += '* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }';
    data_uri += 'body { padding: 1em; margin: 0; background: #eee; color: #333; }';
    data_uri += 'textarea { display: block; margin: 0 auto; padding: .5em; width: 25em; height: 90%; font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; font-size: 2em; border: none; outline: none; overflow: auto;}';
    data_uri += '</style></head>';
    data_uri += '<body><textarea contenteditable autofocus="on" placeholder="Start writing something…">';
    data_uri += text;
    data_uri += '</textarea></body></html>';
    window.open('data:text/html, ' + encodeURIComponent(data_uri), '_blank');
})();

## index.html
<html>
  <head><title>Editor bookmarklet</title></head>
  <body>
    <p>Drag this link to your toolbar:
    <a href="javascript: (function () { var jsCode = document.createElement('script'); jsCode.setAttribute('src', 'https://gist.github.com/raw/4690943/editor.js'); document.body.appendChild(jsCode); }());">Edit selection</a>
    </p>
    <p>Then, on any page, select a text fragment and click the bookmark.</p>
  </body>
</html>
	(function () {
	var text = '',
	data_uri = '';
	if (typeof window.getSelection != 'undefined') {
	text = window.getSelection().toString();
	} else if (typeof document.selection != 'undefined' && document.selection.type == 'Text') {
	text = document.selection.createRange().text;
	}
	console.log('Editing this text: ' + text);
	data_uri = '<html><head><title>Editor</title><style>';
	data_uri += '* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }';
	data_uri += 'body { padding: 1em; margin: 0; background: #eee; color: #333; }';
	data_uri += 'textarea { display: block; margin: 0 auto; padding: .5em; width: 25em; height: 90%; font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; font-size: 2em; border: none; outline: none; overflow: auto;}';
	data_uri += '</style></head>';
	data_uri += '<body><textarea contenteditable autofocus="on" placeholder="Start writing something…">';
	data_uri += text;
	data_uri += '</textarea></body></html>';
	window.open('data:text/html, ' + encodeURIComponent(data_uri), '_blank');
	})();
	<html>
	<head><title>Editor bookmarklet</title></head>
	<body>
	<p>Drag this link to your toolbar:
	<a href="javascript: (function () { var jsCode = document.createElement('script'); jsCode.setAttribute('src', 'https://gist.github.com/raw/4690943/editor.js'); document.body.appendChild(jsCode); }());">Edit selection</a>
	</p>
	<p>Then, on any page, select a text fragment and click the bookmark.</p>
	</body>
	</html>