From the get go, the Bespin project means a few different things. One of the components is the Bespin Editor component itself. We have already seen people taking that piece and plugging it into their system. For example, the XWiki integration.

The problem is that we (Bespin team) haven’t done a good job at making this reuse as easy as it should be. That has now changed with the edition of the bespin.editor.Component class that tries to wrap up the various parts and pieces that the editor can tie into (settings, toolbars, command lines, server and file access) so you don’t have to think about them.

A common use case will be embedding the editor itself, and having it load up some content, maybe from a container div itself.

I created a sample editor to do just this:

There is a video of this in action, comically in 2x speed for some reason on Vimeo :)

Since this is a sample, there are things that you can do, that you probably wouldn’t in your case.

To embed the editor component you will be able to simply do this (NOTE: We haven’t deployed this version to production yet, so for now you need to load up Bespin on your own server, sorry!):

< script src = "https://bespin.mozilla.com/embed.js" ></ script > < script > var _editorComponent ; // Loads and configures the objects that the editor needs dojo. addOnLoad ( function ( ) { _editorComponent = new bespin. editor . Component ( 'editor' , { syntax : "js" , loadfromdiv : true } ) ; } ) ; </ script > < div id = "editor" style = "height: 300px; border: 10px solid #ddd; -moz-border-radius: 10px; -webkit-border-radius: 10px;" > var foo = "whee" ; function flubber ( ) { return "tweeble" ; } </ div >

First we read in the embed wrapper code, which relies on Dojo (so Dojo has to be loaded first).

Then we create a component passing in the HTML tag to inject into, and options which in this case tell it to use JavaScript syntax highlighting, and then load up the editor using the value in the div that we are injecting into.

At this point the editor is ready to go. You can focus on the puppy and start typing, but chances are you want to access the editor text at some point (for example, read from it and post it up to a form).

To mimic this, we have a textarea that we can copy contents into ( editor.getContent() ), and then send it back to the editor ( editor.setContent(contents) ):

function copyToTextarea ( ) { dojo. byId ( 'inandout' ) . value = _editorComponent. getContent ( ) ; } function copyToEditor ( ) { _editorComponent. setContent ( dojo. byId ( 'inandout' ) . value ) ; }

The example also shows how you can change settings for the editor via editor.set(key, value) .

There are more features we should probably put into the editor, such as automatically syncing to a hidden textarea with an id that you specify (so then a form can just be submitted and the backend gets the right stuf).

What else do we need?