1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
    <head>

        <meta charset=utf-8 />
        <title>ContentEditable</title>
        <style>
            .augmentedWord{
                /*background-color:rgba(50,50,50,0.2);*/
                padding-left:4px;
                margin-left:-4px;

                padding-right:4px;
                margin-right:-4px;

                padding-top:1px;
                padding-bottom:8px;
                margin-top:1px;

                outline:2px solid gray;
                border-bottom:20px solid gray;
            }
            
            #outputWrapper{
                position:absolute;
                top:60px;
                left:30px;
                height:14px;
                width: 300px;
                border: 2px solid transparent;
                padding:3px 10px 12px 20px;
            }
            
            #outputWrapper, #inputWrapper, #query{word-spacing:2em;}
            
        </style>
    </head>
    
    <body>


        <div id="outputWrapper">
            <p id="output" contenteditable="true">
                Text here
            </p> 
        </div>



        <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
        <script>
            var output   = document.getElementById("output");
            var savedRange;
            
            
            output.addEventListener('keyup',augmentInput,false);
            output.addEventListener('keydown',saveCursorPos,false);
            output.addEventListener('mousedown',saveCursorPos,false);
            output.addEventListener('keyup',restoreCursorPos,false);
            
            //var event;
            
            function saveCursorPos(e){
                //var selection = window.getSelection();
                savedRange = window.getSelection().getRangeAt(0);
                console.log("save "+e.type,savedRange);
            }
            
            function restoreCursorPos(e){
            document.getElementById("output").focus();

                if (savedRange != null) {
                    var s = window.getSelection();

                    if (s.rangeCount > 0){
                        s.removeAllRanges();
                    }

                    s.addRange(savedRange);
                    console.log("range !=0 "+e.type, savedRange);
                }
                
                else {
                    window.getSelection().addRange(savedRange);
                    console.log("range ==0 "+e.type, savedRange);
                }
            }
            
            function augmentInput(e){
                //hinter dem curson muss immer ein </span> stehen
                //vor einer buchstabenkette immer ein <span>
                //vor einem Leerzeichen immer ein </span>
                var text=$(output).text(); //var text=$(editable).text();
                //console.log(text);
                var textArray=text.split(" ");
                var regExJustWhitespace=new RegExp("^(\s|&nbsp;)*?$");

                output.innerHTML="";
	
                for(var i=0; i<textArray.length; i++){
                    var span = document.createElement('span');
                    var spanEmpty = document.createElement('span');
		
                    span.appendChild(document.createTextNode(textArray[i])); //span.appendChild(document.createTextNode(textArray[i]+" "));
                    spanEmpty.appendChild(document.createTextNode(" ")); //Leerzeichen einhängen
		
                    if(!(/^(\s)*?$/.test(span.firstChild.nodeValue))){ // /^(\s|&nbsp;)*?$  
                        //Testen, ob der span node textihnalt hat. Wenn ja: augmented-word-klasse.
                        span.className="augmentedWord";
                        //span.addEventListener('click',handleWord,false);
                    }
		
		
                    output.appendChild(span);
                    output.appendChild(spanEmpty);                    
                }
                
                 var hi={};
                 hi.type="just called";
                 restoreCursorPos(hi);
            }


        </script>
    </body>
</html>