var editor = null;
HTMLArea.loadPlugin("Stylist");
HTMLArea.loadPlugin("SuperClean");
HTMLArea.loadPlugin("FullScreen");
HTMLArea.loadPlugin("Linker");

function initEditor() {
  editor = new HTMLArea("content");
  var cfg = editor.config;

  editor.registerPlugin(SuperClean);
  editor.registerPlugin(FullScreen);
  editor.registerPlugin(Linker);
  editor.registerPlugin(Stylist);

  // We can load an external stylesheet like this - NOTE : YOU MUST GIVE AN ABSOLUTE URL
  //  otherwise it won't work!
  cfg.stylistLoadStylesheet(document.location.href.replace('stylist.html', 'stylist.css'));
 //   cfg.stylistLoadStylesheet('http://test.oacett.org/newoacett/style.css', {  'p.content' : 'Normal' } );

  // Or we can load styles directly
  cfg.stylistLoadStyles('p.red_text { color:red }');
  //cfg.stylistLoadStyles(' p.content { font-family: arial;font-size: 12px;color: #333333;}', {'p.content' : 'Default'});

  // If you want to provide "friendly" names you can do so like (you can do this for stylistLoadStylesheet as well)
  cfg.stylistLoadStyles('p.pink_text { color:pink }', {'p.pink_text' : 'Pretty Pink'});

  // That's it, pretty easy huh!
  editor.generate();

}