2012-02-02 23:22:23 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<script src="../modules/jquery/jquery.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
$( function() {
|
2012-02-07 00:08:59 +00:00
|
|
|
|
|
|
|
|
var $editor = $('#ce-editor');
|
|
|
|
|
var editorInterval = null;
|
|
|
|
|
var sel = {
|
|
|
|
|
from: 0,
|
|
|
|
|
to: 0
|
|
|
|
|
};
|
|
|
|
|
var prevInput = '';
|
2012-02-02 23:22:23 +00:00
|
|
|
|
2012-02-07 00:08:59 +00:00
|
|
|
$editor.blur(function() {
|
|
|
|
|
if ( editorInterval !== null ) {
|
|
|
|
|
clearInterval( editorInterval );
|
|
|
|
|
}
|
2012-02-03 00:59:46 +00:00
|
|
|
});
|
|
|
|
|
|
2012-02-07 00:08:59 +00:00
|
|
|
$editor.focus(function() {
|
|
|
|
|
prevInput = $editor.html();
|
|
|
|
|
editorInterval = setInterval( readInput, 100 );
|
|
|
|
|
sel.from = sel.to = window.getSelection().getRangeAt(0).startOffset;
|
2012-02-02 23:22:23 +00:00
|
|
|
});
|
2012-02-07 00:08:59 +00:00
|
|
|
|
|
|
|
|
var readInput = function() {
|
|
|
|
|
var text = $editor.html();
|
|
|
|
|
if (text === prevInput) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
var same = 0,
|
|
|
|
|
l = Math.min(prevInput.length, text.length);
|
|
|
|
|
while ( same < l && prevInput[same] === text[same] ) {
|
|
|
|
|
++same;
|
|
|
|
|
}
|
2012-02-02 23:22:23 +00:00
|
|
|
|
2012-02-07 00:08:59 +00:00
|
|
|
sel.from = sel.to = window.getSelection().getRangeAt(0).startOffset - 1;
|
2012-02-02 23:22:23 +00:00
|
|
|
|
2012-02-07 00:08:59 +00:00
|
|
|
|
|
|
|
|
if (same < prevInput.length) {
|
|
|
|
|
console.log(prevInput.length - same);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var newText = text.slice(same);
|
|
|
|
|
|
|
|
|
|
console.log(sel);
|
|
|
|
|
console.log(newText);
|
|
|
|
|
|
|
|
|
|
prevInput = text;
|
|
|
|
|
}
|
2012-02-02 23:22:23 +00:00
|
|
|
|
|
|
|
|
} );
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2012-02-07 00:08:59 +00:00
|
|
|
<div style="width: 500px; height: 200px; border: solid 1px;" contenteditable="true" id="ce-editor"></div>
|
2012-02-02 23:22:23 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
