-
Notifications
You must be signed in to change notification settings - Fork 0
/
contenteditable4.html
85 lines (79 loc) · 2.31 KB
/
contenteditable4.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>contenteditable Test v.4</title>
<link rel="stylesheet" type="text/css" href="cheap-toggle.css" />
<link rel="stylesheet" type="text/css" href="ce4.css" />
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript" src="jQuery.toPlaintext.js"></script>
<script type="text/javascript" src="gruberize/jQuery.linkURLs.js"></script>
<script type="text/javascript">
$(function(){
$('.editable').attr('contenteditable', true);
$('.editable a').live('click', function(){
alert('(stub - would open link in new window…)');
});
$('.toggle a').click(function(){
$(this).parent('.toggle').children('a').removeClass('enabled').end().end().addClass('enabled');
});
var ourDom = $('#dom');
var ourContent = $('#editableContent');
var ourMethodToggle = $('#method');
var cdTimeout = null;
function copyDom(){
cdTimeout = null;
var method;
ourMethodToggle.children('.enabled').each(function(){
method = $(this).attr('data-method');
return false; //break out of .each()
});
if(method==='rawDom'){
ourDom.text(ourContent.html());
} else if(method==='asPlaintext') {
ourDom.text(
ourContent/*clone().*/.toPlaintext({whiteSpace:'pre'})
);
} else {
ourDom.text('(No valid method selected. Was: «'+method+'»)');
}
}
ourMethodToggle.click(function(){copyDom();});
ourContent.linkURLs();
ourContent.bind('blur keypress keydown cut paste', function(){
if(cdTimeout) {
} else {
cdTimeout = window.setTimeout(copyDom, 100);
}
});
copyDom();
});
</script>
</head>
<body>
<a id="dropboxLink" href="//dl.dropbox.com/u/105727/web/contenteditable3.html">Dropbox</a>
<h1>contenteditable Test </h1>
<div class="left-pane">
<h3>Edit this</h3>
</div>
<div class="right-pane">
<div class="toggle" id="method">
<a href="#" data-method="rawDom">Raw DOM</a><!--
--><a href="#" data-method="asPlaintext" class="enabled">Plaintext</a>
</div>
</div>
<div class="left-pane main">
<div class="editable" id="editableContent">The contents of this div
are <span lang="en">editable</span> by the user.
- Visit http://alanhogan.com!
- Another item
- www.simplenoteapp.com to learn about SN
Tabbed in.
Some other stuff & stuff.
</div>
</div><!--left pane-->
<div class="right-pane main">
<div id="dom"></div>
</div>
</body>
</html>