Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 205 lines (167 sloc) 5.19 kB
0120507 @joearms first commit
authored
1 <style>
2 /* set the padding here to match with the size of the top and right
3 sidebars */
4
5 body {
6 padding-top:120px;
7 padding-left:100px;
8 padding-right:320px;
9 }
10
11 div#header {
12 background-color:#aabbcc;
13 position:fixed;
14 padding-left:10px;
15 top:0;
16 left:0;
17 width:500%;
18 height:50px; /* so padding-left:70px */
19 }
20
21 div#sidebar{
22 background-color:#bbccee;
23 position:fixed;
24 padding-left:20px;
25 padding-right:10px;
26 top:50px;
27 right:0;
28 width:250px; /* so padding-right in body:270px */
29 height:100%;
30 }
31
32 * html body{
33 overflow:hidden;
34 }
35
36 * html div.content{
37 height:100%;
38 overflow:auto;
39 }
40
41 pre {
42 margin: 1em;
43 font-weight: bold;
44 background-color: #FED;
45 border-style: solid;
46 border-width: 1px;
47 -webkit-border-radius: .5em;
48 -moz-border-radius: .5em;
49 border-color: #48C;
50 padding: 0.5em;
51 font-size: 120%;
52 overflow: auto;
53 }
54
55 h2 {
56 background: blue;
57 color: white;
58 font-size: 100%;
59 font-weight: bold;
60 margin: 0.7em 0 0.1em 0;
61 padding: .25em 1em .25em 1em;
62 -webkit-border-radius: .7em;
63 -moz-border-radius: 1em;
64 }
65
66 p {text-align:justify}
67
68 </style>
ad84d88 @joearms used google's jquery and removed local version
authored
69
70 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
71 </script>
0120507 @joearms first commit
authored
72
73 <script>
74
75 var editing,c;
76
77 function toggle_edit()
78 {
79 switch(editing){
80 case true:
81 c.get(0).contentEditable = true;
82 c.css({background:"#eeeeee"});
83 $("#header").html("<h2>You can now edit this document - but you can't save the results</h2>");
84 editing=false;
85 break;
86 case false:
87 c.get(0).contentEditable = false;
88 c.css({background:"white"});
89 editing=true;
90 $("#header").html("<h2>This document is locked</h2>");
91 break;
92 }
93 }
94
95 function add_pre()
96 {
97 document.execCommand("insertHTML", false,
98 "<pre>I'm pre Edit me</pre>");
99 }
100
101
102 function add_mod()
103 {
104 document.execCommand("insertHTML", false,
105 "<pre>-module(math).\n-compile(export_all).\n\nfac(0) -> 1;\nfac(N) -> N*fac(N-1).</pre>");
106 }
107
108
109 $(document).ready(function(){
110 editing=false;
111 c = $("#content");
112 b = $("<button>toggle edit</button>").click(toggle_edit);
113 $("#sidebar").append(b);
114 pre = $("<button>pre</button>").click(add_pre);
115 $("#sidebar").append(pre);
116 mod = $("<button>add module</button>").click(add_mod);
117 $("#sidebar").append(mod);
118 toggle_edit();
119 });
120 </script>
121
122 <body>
123
124 <div id="header"></div>
125 <div id="sidebar"></div>
126 <div id="content">
127 <h2>Mini editor (Part 3)</h2>
128
129 <p>This is the third in a seven part series on how to make a
130 WYSIWYG structure editor using javascript, jquery, erlang and couchDB.
131 </p>
132
133 <ul>
134 <li><a href="mini1.html">Part1 - toggling content editable</a></li>
135 <li><a href="mini2.html">Part2 - Adding some style</a></li>
136 <li><a href="mini3.html">Part3 - Adding editing buttons</a></li>
137 <li><a href="mini4.html">Part4 - A seamless structure editor</a></li>
138 <li><a href="mini5.html">Part5 - All the buttons</a></li>
139 <li><a href="mini6.html">Part6 - Storing the results forever</a></li>
140 <li><a href="mini7.html">Part7 - Integration with couchdb</a></li>
141 </ul>
142
143 <h2>Adding Editing Buttons</h2>
144
145 <p>There's a problem with the editor. I don't know if you noticed
146 it. When you hit carriage return in the middle of a region that you
147 are editing a new region is created and this new region inherits the
148 properties of the current region.</p>
149
150 <p>Just test this by going back to <a href="Part 2">Part 2</a> and try
151 editing the page. You'll find there is no way you can add, for
152 example, a new <b>pre</b> region between two paragraphs. Try this,
153 then return to this page.
154 </p>
155
156 <p>To allow for addition of <b>pre</b> field, we'll add a <b>pre</b>
157 button to the sidebar. That's easy:</p>
158
159 <pre>
160 $(document).ready(function(){
161 editing=false;
162 c = $("#content");
163 b = $("&lt;button>toggle edit&lt;/button>").click(toggle_edit);
164 $("#sidebar").append(b);
165 pre = $("&lt;button>pre&lt;/button>").click(add_pre);
166 $("#sidebar").append(pre);
167 toggle_edit();
168 });
169 </pre>
170
171 <p>And <b>add_pre</b></p>
172
173 <pre>
174 function add_pre()
175 {
176 document.execCommand("insertHTML", false,
177 "&lt;pre>I'm pre Edit me&lt;/pre>");
178 }
179 </pre>
180
181 <h2>Adding complex structures</h2>
182
183 <p>You could also add more complex structures, I've added a button
184 that creates an Erlang modle. <i>Alert readers might be thinking that
185 doing this might be a way of "bringing eclipse and refactoring to the
186 browser" - they would be right!</i>
187 </p>
188
189 <p>If you've understood the article so far you should have no problems
190 following the code. Just do view source and take a peek.</p>
191
192 <p>To run the code, click on toggle edit, then click somwhere in the
193 document and click on <b>add_module</b></p>
194
195 <h2>More things to do</h2>
196
197 <p>Now there are a whole bunfle of things you can do with content
198 editable mode. Far more than just inserting HTML. For an excellent
199 list of things to do look at
200 <a href="http://www.quirksmode.org/dom/execCommand/">http://www.quirksmode.org/dom/execCommand/</a>
201
202
203 </div>
204 </body>
Something went wrong with that request. Please try again.