Getting the Dojo 1.5 rich text editor dijit.Editor working nicely with Rails 3

Dec 22, 2010

I could not find much on the web and it took me a little time to get everything working (especially saving edited content) so I'll share some code, hopefully to save you some time. In apps/views/layouts/application.html.erb I added some boilerplate (with non-editor stuff not shown) to be included with each rendered page:

<head>
  <link rel="stylesheet" type="text/css"
        href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/tundra/tundra.css">
  <link rel="stylesheet" type="text/css"
    href= "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/editor/plugins/resources/css/Save.css">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
          djConfig="parseOnLoad: true">
  </script>
  <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.Editor");
      dojo.require("dojox.editor.plugins.Save");
  </script>
</head>

Then in my view I create an inline rich editor using:

<div dojoType="dijit.Editor" id="editor1"
     extraPlugins="[{name: 'save', url: 'task'}]">
  <%= raw(@task_current.content) %>
</div>

It is very important to use the raw method because Rails 3 automatically makes safe HTML encoded strings for any result returned by <%= ... %>. Also notice the url value of 'task': this sends the content data to the index method of the task_controller. This method checks to see if an incoming request is an XHR POST and if so gets the raw content:

if request.xhr?
   if session[:task_id]
     task = Task.find(session[:task_id])
     task.content=request.raw_post
     task.save!
   end
end

For brevity I did not show any error handling.

Enjoy!
Tweet

Mark Watson’s Artificial Intelligence Books and Blog

Getting the Dojo 1.5 rich text editor dijit.Editor working nicely with Rails 3