nashingofteeth/outliner.html

## outliner.html
<script>
document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.ctrlKey && evt.keyCode == 13) {
        evt.preventDefault();
        pasteHtmlAtCaret('<li style="margin-left: 15px;"> </li>');
    }
    if (evt.altKey && evt.keyCode == 13) {
        evt.preventDefault();
        pasteHtmlAtCaret('<li style="margin-left: -15px;"> </li>');
    }
    if (evt.keyCode == 27) {
        evt.preventDefault();
        document.body.innerHTML = '<li> </li>';
    }
};

function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // non-standard and not supported in all browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);

            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
    }
}
</script>
<body autofocus contenteditable>
<li>Ctrl-Enter: add indent; Alt-Enter: remove indent</li>
</body>

## sortable.html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

<body contenteditable autofocus>
<ul id="sortable">
  <li>make a list</li>
</ul>
</body>
<script>
$(window).keydown(function(event) {
  if(event.ctrlKey && event.keyCode == 13) {
    pasteHtmlAtCaret('<li style="margin-left: 15px;"> </li>');
    return false;
    event.preventDefault();
  }
  if(event.altKey && event.keyCode == 13) {
    pasteHtmlAtCaret('<li style="margin-left: -15px;"> </li>');
    return false;
    event.preventDefault();
  }
  if (event.keyCode == 27) {
    $(function() {
      $( "#sortable" ).sortable();
      $( "#sortable" ).disableSelection();
    });
    return false;
    event.preventDefault();
  }
  /*if (event.keyCode == 13) {
    pasteHtmlAtCaret('<li> </li>');
    return false;
  }*/
});

function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // non-standard and not supported in all browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);

            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
    }
}
</script>
	<script>
	document.onkeydown = function(evt) {
	evt = evt \|\| window.event;
	if (evt.ctrlKey && evt.keyCode == 13) {
	evt.preventDefault();
	pasteHtmlAtCaret('<li style="margin-left: 15px;"> </li>');
	}
	if (evt.altKey && evt.keyCode == 13) {
	evt.preventDefault();
	pasteHtmlAtCaret('<li style="margin-left: -15px;"> </li>');
	}
	if (evt.keyCode == 27) {
	evt.preventDefault();
	document.body.innerHTML = '<li> </li>';
	}
	};

	function pasteHtmlAtCaret(html) {
	var sel, range;
	if (window.getSelection) {
	// IE9 and non-IE
	sel = window.getSelection();
	if (sel.getRangeAt && sel.rangeCount) {
	range = sel.getRangeAt(0);
	range.deleteContents();

	// Range.createContextualFragment() would be useful here but is
	// non-standard and not supported in all browsers (IE9, for one)
	var el = document.createElement("div");
	el.innerHTML = html;
	var frag = document.createDocumentFragment(), node, lastNode;
	while ( (node = el.firstChild) ) {
	lastNode = frag.appendChild(node);
	}
	range.insertNode(frag);

	// Preserve the selection
	if (lastNode) {
	range = range.cloneRange();
	range.setStartAfter(lastNode);
	range.collapse(true);
	sel.removeAllRanges();
	sel.addRange(range);
	}
	}
	} else if (document.selection && document.selection.type != "Control") {
	// IE < 9
	document.selection.createRange().pasteHTML(html);
	}
	}
	</script>
	<body autofocus contenteditable>
	<li>Ctrl-Enter: add indent; Alt-Enter: remove indent</li>
	</body>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

	<body contenteditable autofocus>
	<ul id="sortable">
	<li>make a list</li>
	</ul>
	</body>
	<script>
	$(window).keydown(function(event) {
	if(event.ctrlKey && event.keyCode == 13) {
	pasteHtmlAtCaret('<li style="margin-left: 15px;"> </li>');
	return false;
	event.preventDefault();
	}
	if(event.altKey && event.keyCode == 13) {
	pasteHtmlAtCaret('<li style="margin-left: -15px;"> </li>');
	return false;
	event.preventDefault();
	}
	if (event.keyCode == 27) {
	$(function() {
	$( "#sortable" ).sortable();
	$( "#sortable" ).disableSelection();
	});
	return false;
	event.preventDefault();
	}
	/*if (event.keyCode == 13) {
	pasteHtmlAtCaret('<li> </li>');
	return false;
	}*/
	});

	function pasteHtmlAtCaret(html) {
	var sel, range;
	if (window.getSelection) {
	// IE9 and non-IE
	sel = window.getSelection();
	if (sel.getRangeAt && sel.rangeCount) {
	range = sel.getRangeAt(0);
	range.deleteContents();

	// Range.createContextualFragment() would be useful here but is
	// non-standard and not supported in all browsers (IE9, for one)
	var el = document.createElement("div");
	el.innerHTML = html;
	var frag = document.createDocumentFragment(), node, lastNode;
	while ( (node = el.firstChild) ) {
	lastNode = frag.appendChild(node);
	}
	range.insertNode(frag);

	// Preserve the selection
	if (lastNode) {
	range = range.cloneRange();
	range.setStartAfter(lastNode);
	range.collapse(true);
	sel.removeAllRanges();
	sel.addRange(range);
	}
	}
	} else if (document.selection && document.selection.type != "Control") {
	// IE < 9
	document.selection.createRange().pasteHTML(html);
	}
	}
	</script>