Writing a WYSIWYG Wiki Editor with YUI and Grails

By YUI TeamMay 1, 2008

Read Glen Smith's tutorial on using the YUI RTE to create and edit wiki text.

Check out Glen's screencast showing the editor in action.One of the challenges faced in creating and deploying Rich Text Editors is the number of markup formats you may need to support on the output side — ranging from HTML to Wiki-style text to purely idiosyncratic markup styles. Dav worked hard on the YUI Rich Text Editor to make output transformations as straightforward as possible. (If you're doing YUI RTE work and haven't seen Dav's video intro to the component, you can check it out here.)

Glen Smith from Canberra shared some antipodean YUI goodness today with a quick tutorial on using the YUI RTE for editing Wiki text. He's been using the Grails YUI Plugin, mixing in a little textile-j, and he's got something working well enough for version 1:

Turns out the recipe for making all this work is pretty straighforward:

  • When switching from Wiki markup to HTML, do an Ajax call to a backend Grails controller that uses textile-j to convert from textile markup to html. Feed the result of the AJAX call to the YUI Rich Editor and you're in business.
  • To support switching from RichText to Textile, again do an Ajax call back to the Grails controller to the do the conversion. This time you're on your own in regexp land, but you can trim the amount of work you've got to do by what you expose in the Rich editor. Return the results and inject into the Wiki textarea.
  • To get the underlying html from the editor just use myEditor.getEditorHTML(). Awesome!

For more, check out Glen's blog post and accompanying QuickTime movie.