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

https://mediawiki.org/wiki/Special:Code/MediaWiki/112148
2024-11-24 22:35:41 +00:00 · 2012-02-22 21:14:04 +00:00 · 2012-02-22 21:14:04 +00:00 · 4e81a183c4 · 2012-02-27 16:40:01 +00:00
parent 3227903d48
commit 4e81a183c4
2 changed files with 99 additions and 0 deletions
--- a/playground/index.html
+++ b/playground/index.html
@ -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>
--- a/playground/playground.js
+++ b/playground/playground.js
@ -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();
+});