2012-05-17 20:59:45 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Cursor</title>
|
|
|
|
|
<style>
|
|
|
|
|
.editor {
|
|
|
|
|
border: 1px solid #369;
|
|
|
|
|
outline: none;
|
|
|
|
|
padding: 5px;
|
|
|
|
|
}
|
|
|
|
|
.alien {
|
|
|
|
|
background: #9F9;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
p .alien {
|
|
|
|
|
display: inline;
|
|
|
|
|
}
|
|
|
|
|
.alien::selection {
|
|
|
|
|
background: #CCC;
|
|
|
|
|
}
|
|
|
|
|
.slug {
|
|
|
|
|
display: block;
|
|
|
|
|
height: 1px;
|
|
|
|
|
width: 1px;
|
|
|
|
|
margin-left: -1px;
|
|
|
|
|
margin-bottom: -1px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script src="../../modules/jquery/jquery.js"></script>
|
|
|
|
|
<script src="../../modules/rangy/rangy-core.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1>Test 1</h1>
|
|
|
|
|
<div contenteditable="true" class="editor">
|
|
|
|
|
<span class="slug"></span>
|
|
|
|
|
<p><span contenteditable="false" spellcheck="false" class="alien">⁣Alien⁣</span> and some text</p>
|
|
|
|
|
<div contenteditable="false" spellcheck="false" class="alien"><div>Alien in a div</div></div>
|
|
|
|
|
<span class="slug"></span>
|
|
|
|
|
<div contenteditable="false" spellcheck="false" class="alien"><div>Alien in a div</div></div>
|
|
|
|
|
<p>some text before an <span contenteditable="false" spellcheck="true" class="alien">⁣Alien⁣</span></p>
|
|
|
|
|
<span class="slug"></span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h1>Test 2</h1>
|
|
|
|
|
<div contenteditable="true" class="editor">
|
|
|
|
|
<span class="slug"></span>
|
|
|
|
|
<div contenteditable="false" spellcheck="false" class="alien"><div>Alien in a div</div></div>
|
|
|
|
|
<span class="slug"></span>
|
|
|
|
|
<div contenteditable="false" spellcheck="false" class="alien"><div>Alien in a div</div></div>
|
|
|
|
|
<span class="slug"></span>
|
|
|
|
|
<div contenteditable="false" spellcheck="false" class="alien"><div>Alien in a div</div></div>
|
|
|
|
|
<span class="slug"></span>
|
|
|
|
|
</div>
|
|
|
|
|
<script>
|
|
|
|
|
$('.alien').on('click', function() {
|
|
|
|
|
var range = rangy.createRange();
|
|
|
|
|
range.setStart($(this).prev('.slug')[0], 0);
|
|
|
|
|
rangy.getSelection().addRange(range);
|
|
|
|
|
});
|
2012-05-17 21:12:09 +00:00
|
|
|
$('.editor').one('keydown', function(e) {
|
|
|
|
|
var newParagraph = $('<p> </p>');
|
2012-05-17 20:59:45 +00:00
|
|
|
$('.editor').eq(1).find('.slug').eq(1).replaceWith(newParagraph);
|
|
|
|
|
|
|
|
|
|
console.log(newParagraph);
|
|
|
|
|
var range = rangy.createRange();
|
|
|
|
|
range.setStart( newParagraph[0], 0 );
|
|
|
|
|
range.setEnd( newParagraph[0], 1 );
|
|
|
|
|
rangy.getSelection().setSingleRange(range);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
var lastSlug = null;
|
|
|
|
|
setInterval(function() {
|
|
|
|
|
var sel = rangy.getSelection();
|
|
|
|
|
if (!sel.anchorNode) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
console.log(sel.anchorNode);
|
|
|
|
|
if ($(sel.anchorNode).hasClass('slug')) {
|
|
|
|
|
lastSlug = sel.anchorNode;
|
|
|
|
|
$(sel.anchorNode).css('height', '1em');
|
|
|
|
|
}
|
|
|
|
|
if (sel.anchorNode != lastSlug) {
|
|
|
|
|
$(lastSlug).css('height', '1px');
|
|
|
|
|
}
|
|
|
|
|
}, 50);
|
|
|
|
|
*/
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
