January 2, 2011 | In: Bespin, JavaScript, Skywriter
Writing in the Sky
The folks over at Mozilla Labs have some interesting projects going on. One I’ve been playing with recently is Skywriter [originally named Bespin, and kudos to you if you got the reference without clicking the link]. The basic premise: it’s an IDE like editor you can add to your web applications.
The effect is pretty impressive so far and they’re not even at version 1.0. Out of the box it provides a rich looking text editor. It’s plugin framework provides the ability to extend it even further.
So what’s the negative? Well the plugin gallery only has 24 plugins as of this writing and most of them are syntax highlighters which is cool but a bit limited. It uses some advanced HTML5 canvas as well as web workers. So browser support is relatively limited. The latest versions of Chrome, Firefox and Safari will be fine. But if your users have IE or older browsers you had better make sure your app degrades gracefully.
There’s some great docs on the labs site but I found that when I downloaded the demos they didn’t work right out of the box on my machine because the references to the Javascript files were messed up.
Now that we’ve covered the overview let’s dive in – make sure you’re using one of the supported browsers or the demo’s won’t work.
Semantics
They’ve renamed the project Skywriter – but every file is still called Bespin – for the purpose of this writing I’ll use Bespin.
The Download
The first thing you’ll want to do is download the latest version from the labs site – https://mozillalabs.com/skywriter/.
Once you’ve downloaded and unzipped everything you’ll notice there are quite a few files and directories. Many of those files are there so you could build your own version of Bespin, plugins you could build into your custom Bespin ,the obligatory docs directory and a directory name prebuilt.
Prebuilt, as the name might indicate, is an already compiled and ready to embed version of Bespin.
Let’s focus on that for now and we’ll worry about building our own Bespin in a future post.
Embedding Bespin in Your Web Page
To make this as generic as possible I am going to demonstrate how to embed a Bespin editor in a page and handle the value on a form submit. I’ll use straight HTML and Javascript for the demo but of course you can use this in .Net/Java/Php/Ruby etc.
Step 1 – Put the files where they need to be:
From the downloaded Prebuilt directory grab the BespinEmbeded.css, BespinEmbdedded.js, BespinWorker.js, BespinMain.js and the resources directory and copy them to your project/site folder.
Step 2 – Add the proper references to the <head></head> portion of your page:
You need two lines in the header of your page. Mine look like the following:
<link id="bespin_base" href="script/bespin"/> <script type="text/javascript" src="script/bespin/BespinEmbedded.js"></script>
The bespin_base link tag needs to point to the directory where you pasted your bespin files in step 1. Similarly your script tag includes the BespinEmbedded.js file from step 1.
Step 3 – Add the bespin css class to a div on your page The key here is to make sure you give your div height and width. The editor needs a known height and width to draw itself. In my example below I’ve put height and width inline for demonstration purposes
<div id="bespin_editor" class="bespin" style="height:400px; width: 90%"></div>
And, well, that’s it really. You now have a slick looking HTML5 based editor right on your page. Now we can start using what Bespin brings to the table. For example, to add HTML syntax highlighting we can add a property to our div:
<div id="bespin_editor" class="bespin" style="height:400px; width: 90%" data-bespinoptions='{"syntax": "html"}'></div>
How to Handle the Editor Value in a Form Post
So now you have a great editor on your page and you want to post your form somewhere to save the data. The trick I have used is to copy the editor value to a hidden input field. This way you can treat the value like any of your other form fields – remember your editor is just a div and will not post.
So here’s a little Javascript to do just that:
function UpdateBespinValue(){
var edit = document.getElementById("bespin_editor");
var env = edit.bespin;
var editor = env.editor;
var hidden = document.getElementById("bespin_value");
hidden.value = editor.value;
alert(hidden.value);
}
Next steps: