Simple and temporary playground to work on retrieving content changes from content editable element.

This commit is contained in:
Inez Korczynski 2012-02-22 21:14:04 +00:00
parent 3227903d48
commit 4e81a183c4
Notes: Gabriel Wicke 2012-02-27 16:40:01 +00:00
2 changed files with 99 additions and 0 deletions

20
playground/index.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<title>Playground</title>
<style>
#editor {
width: 300px;
height: 300px;
border: solid 1px;
}
</style>
<script src="../modules/jquery/jquery.js"></script>
<script src="playground.js"></script>
</head>
<body>
<div contenteditable="true" id="editor">
</div>
</body>
</html>

79
playground/playground.js Normal file
View file

@ -0,0 +1,79 @@
app = function () {
var _this = this,
$document = $( document );
this.$editor = $('#editor');
this.$editor.bind( {
'focus': function( e ) {
$document.unbind( '.surfaceView' );
$document.bind( {
'keydown.surfaceView': function( e ) {
return _this.onKeyDown( e );
}
} );
},
'blur': function( e ) {
$document.unbind( '.surfaceView' );
}
} );
this.$editor.mousedown( function(e) {
return _this.onMouseDown( e );
} );
// Set initial content for the "editor"
this.$editor.html("<b>Lorem Ipsum is simply dummy text</b> of the printing and typesetting industry. <b>Lorem Ipsum has been the <i>industry's</i> standard</b> dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it <u>to <b>make <i>a type</i> specimen</b> book.</u>");
this.prevText = app.getDOMText(this.$editor[0]);
setInterval(function() {
_this.loopFunc();
}, 200);
};
app.prototype.onKeyDown = function() {
console.log("onKeyDown");
};
app.prototype.onMouseDown = function() {
console.log("onMouseDown");
};
app.prototype.loopFunc = function() {
var text = app.getDOMText(this.$editor[0]);
if(text != this.prevText) {
console.log(text);
this.prevText = text;
}
};
app.getDOMText = function( elem ) {
var nodeType = elem.nodeType,
ret = '';
if ( nodeType === 1 || nodeType === 9 ) {
// Use textContent || innerText for elements
if ( typeof elem.textContent === 'string' ) {
return elem.textContent;
} else if ( typeof elem.innerText === 'string' ) {
// Replace IE's carriage returns
return elem.innerText.replace( /\r\n/g, '' );
} else {
// Traverse it's children
for ( elem = elem.firstChild; elem; elem = elem.nextSibling) {
ret += app.getDOMText( elem );
}
}
} else if ( nodeType === 3 || nodeType === 4 ) {
return elem.nodeValue;
}
return ret;
};
$(function() {
new app();
});