| 1 |
lars |
1 |
<html><head><title>Whizzywig editor for multiple divs</title>
|
|
|
2 |
|
|
|
3 |
|
|
|
4 |
<link rel="stylesheet" type="text/css" href="simple.css">
|
|
|
5 |
<script language="JavaScript" type="text/javascript">
|
|
|
6 |
function popwhizz(element){ //Pop up a whizzywig form for the element id
|
|
|
7 |
window.open('whizzywig.htm?'+element,'popwhizzhizz',
|
|
|
8 |
'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=480,top=100')
|
|
|
9 |
}
|
|
|
10 |
function whizzed(){
|
|
|
11 |
//EXAMPLE ONLY: Join the divs together and put them into the hidden 'edited' -
|
|
|
12 |
document.getElementById('edited').value='<table><tr><td>'+document.getElementById('text1').innerHTML
|
|
|
13 |
+'</td><td>'+document.getElementById('links').innerHTML+'</td></tr></table>'
|
|
|
14 |
+document.getElementById('text2').innerHTML
|
|
|
15 |
;
|
|
|
16 |
//ALTERNATIVELY: have a <input type="hidden" ...>for each editable block
|
|
|
17 |
}
|
|
|
18 |
</script></head><body>
|
|
|
19 |
|
|
|
20 |
<div id="header">
|
|
|
21 |
<h1><a href="http://www.unverse.net/">Unverse.net</a></h1>websites made. easy.
|
|
|
22 |
<hr>
|
|
|
23 |
</div><!--header-->
|
|
|
24 |
<form action="http://unverse.net/whizzed.php" method="post" onsubmit="whizzed()">
|
|
|
25 |
<input id="edited" name="edited" type="hidden">
|
|
|
26 |
|
|
|
27 |
Click the boxes below to edit contents:
|
|
|
28 |
<table border="1" cellspacing="10"><tbody><tr>
|
|
|
29 |
<td onclick="popwhizz(this.id)" id="text1">
|
|
|
30 |
<h2>Multiple whizzywigs</h2>
|
|
|
31 |
<p>This demonstrates whizzywig editing multiple areas</p>
|
|
|
32 |
<p>Three areas on this page can be edited with a pop-up whizzywig editor.</p>
|
|
|
33 |
<p>None of them are textareas: they could be, but they look nicer like this</p>
|
|
|
34 |
</td>
|
|
|
35 |
<td onclick="popwhizz(this.id)" id="links">
|
|
|
36 |
<h2>Elsewhere <img src="btn/link.gif" alt="Links"></h2>
|
|
|
37 |
<ul>
|
|
|
38 |
<li><a href="http://www.unverse.net/">Unverse.net</a></li>
|
|
|
39 |
<li><a href="http://www.abitabout.com/">aBitAbout</a></li>
|
|
|
40 |
<li><a href="http://news.google.com/">Google News</a></li>
|
|
|
41 |
</ul>
|
|
|
42 |
</td>
|
|
|
43 |
</tr></tbody></table>
|
|
|
44 |
|
|
|
45 |
<p>or...</p>
|
|
|
46 |
<button type="button" onclick="popwhizz('text2')">Edit text below</button>
|
|
|
47 |
|
|
|
48 |
<div id="text2">
|
|
|
49 |
<h2>How this works</h2>
|
|
|
50 |
<p>You need <a href="http://www.unverse.net/whizzery/whizzywig.js">whizzywig.js</a>, version 53 or later and<br>
|
|
|
51 |
<a href="whizzywig.htm" target="_blank"><strong>whizzywig.htm</strong></a> on your server. ←Follow that link and <br>File > Save as... to get a copy.</p>
|
|
|
52 |
<p>You may need to edit it to get the path to <strong>whizzywig.js</strong> right and to play with the settings in the //CONFIGURE section</p>
|
|
|
53 |
|
|
|
54 |
<p>The function <strong>popwhizz(id)</strong>
|
|
|
55 |
on this page pops up a whizzywig editor (user can resize it), prefilled
|
|
|
56 |
with the content of the DIV you specify with the id parameter. The
|
|
|
57 |
id parameter is the id of the DIV. </p>
|
|
|
58 |
<p>When the user clicks <strong>Update</strong> the pop-up closes and it updates the DIV.</p>
|
|
|
59 |
<p><em>It does not have to be a DIV: it can be any element that can contain other block level elements, e.g. TD.</em></p>
|
|
|
60 |
<p>This demo shows 2 different ways of invoking the editor: </p>
|
|
|
61 |
<ol>
|
|
|
62 |
<li>click the text, or </li>
|
|
|
63 |
<li>a button </li></ol>
|
|
|
64 |
<p>- <em>but you could use other events</em>.</p>
|
|
|
65 |
<p>You need some kind of function to copy the edited DIVS into hidden form fields on submit. The one on this page is <strong>just an example</strong>.<br></p>
|
|
|
66 |
</div>
|
|
|
67 |
|
|
|
68 |
<input name="submit" value="Submit" type="submit">
|
|
|
69 |
</form>
|
|
|
70 |
</body></html>
|