Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
162 lines (132 sloc) 4.29 KB
<style>
/* set the padding here to match with the size of the top and right
sidebars */
body {
padding-top:120px;
padding-left:100px;
padding-right:320px;
}
div#header {
background-color:#aabbcc;
position:fixed;
padding-left:10px;
top:0;
left:0;
width:500%;
height:50px; /* so padding-left:70px */
}
div#sidebar{
background-color:#bbccee;
position:fixed;
padding-left:20px;
padding-right:10px;
top:50px;
right:0;
width:250px; /* so padding-right in body:270px */
height:100%;
}
* html body{
overflow:hidden;
}
* html div.content{
height:100%;
overflow:auto;
}
pre {
margin: 1em;
font-weight: bold;
background-color: #FED;
border-style: solid;
border-width: 1px;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-color: #48C;
padding: 0.5em;
font-size: 120%;
overflow: auto;
}
h2, div.header {
background: blue;
color: white;
font-size: 100%;
font-weight: bold;
margin: 0.7em 0 0.1em 0;
padding: .25em 1em .25em 1em;
-webkit-border-radius: .7em;
-moz-border-radius: 1em;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script>
var editing,c;
function toggle_edit()
{
switch(editing){
case true:
c.get(0).contentEditable = true;
c.css({background:"#eeeeee"});
$("#header").html("<h2>You can now edit this document - but you can't save the results</h2>");
editing=false;
break;
case false:
c.get(0).contentEditable = false;
c.css({background:"white"});
editing=true;
$("#header").html("<h2>This document is locked</h2>");
break;
}
}
$(document).ready(function(){
editing=false;
c = $("#content");
b = $("<button>toggle edit</button>").click(toggle_edit);
$("#sidebar").append(b);
toggle_edit();
});
</script>
<body>
<div id="header"></div>
<div id="sidebar"></div>
<div id="content">
<h2>Mini editor (Part 4)</h2>
<p>This is the forth part in a seven part series on how to make a
WYSIWYG structure editor using javascript, jquery, erlang and couchDB.
</p>
<ul>
<li><a href="mini1.html">Part1 - toggling content editable</a></li>
<li><a href="mini2.html">Part2 - Adding some style</a></li>
<li><a href="mini3.html">Part3 - Adding editing buttons</a></li>
<li><a href="mini4.html">Part4 - A seamless structure editor</a></li>
<li><a href="mini5.html">Part5 - All the buttons</a></li>
<li><a href="mini6.html">Part6 - Storing the results forever</a></li>
<li><a href="mini7.html">Part7 - Integration with couchdb</a></li>
</ul>
<h2>A seamless structure editor</h2>
<p>It's time to stop and reflect upon what we have done. Using a
handful of lines of jQuery code and content editable mode we have
created a <i>seamless</i> editor. We can edit any content at any place
on the page and see the final result immediately. There is no
distinction between editing the page and browsing it. Moreover by
adding buttons like <b>add module</b> to our toolbar we can add custom
effects to our editor in a handful of lines of code.</p>
<p>This is like having an open office word processor in the browser,
where we can easily add complex effect triggered by custom
buttons.</p>
<p>Behind the scenes we are creating HTML data structures, but we
never seem these structures. After a while the HTML we create may be a
bit of a mess so we might have to read the HTML and then parse and
sanitize the results.</p>
<p>What we cannot do is store the results of an edit. An editor that
cannot store the results of an edit is pretty useless. So in the next
parts of the article I'll add persistent storage to the editor.</p>
<p>But before we do this I want to add a whole bundle of editing
buttons to the toolbar. I just added <n>pre</n> and <b>add module</b>
but we want a lot more than this for our editor to be useful.</p>
<h2>A few little problems</h2>
<p>Astute readers will have noticed that while in editing mode you
cannot click on a link, so the story gets more complicated and our
editor is not entirely seamless. Nor can you edit links etc. To fix
this is out of the scope of this article - it involves setting a local
style of <b>contentEditable=false</b> in the href tag.</p>
</body>