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

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!

Comments

Popular posts from this blog

My Dad's work with Robert Oppenheimer and Edward Teller

Time and Attention Fragmentation in Our Digital Lives

Ruby Sinatra web apps with background work threads