This post originated from an RSS feed registered with Ruby Buzz by Jonathan Weiss. Original Post: Dojo and Rails or better Dojo and the base relative path Feed Title: BlogFish Feed URL: http://blog.innerewut.de/feed/atom.xml Feed Description: Weblog by Jonathan Weiss about Unix, BSD, security, Programming in Ruby, Ruby on Rails and Agile Development. Latest Ruby Buzz Posts Latest Ruby Buzz Posts by Jonathan Weiss Latest Posts From BlogFish

For a new project we need a WYSIWYG editor and my experiences with FCKeditor are not the best. It throws a bunch of JavaScript errors and warnings and just doesn't feel right.

As I know Prototype and script.aculo.us quite good I thought I should give Dojo and their nice editor a try. Dojo is a heavy-weight framework compared with Prototype but has some very nice Widgets.

Normally you integrate Dojo like this:

<script src="path/to/dojo/dojo.js" type="text/javascript"></script>

<script type="text/javascript">
  dojo.require("dojo.widget.*");
  dojo.require("dojo.widget.Editor");
  //.. have fun with Dojo
</script>

In my case I wanted to use the Dojo rich text editor in a view called /mail/new so I had this code in app/view/mail/new.rhtml:

<script src="/javascripts/dojo/dojo.js" type="text/javascript"></script>

<script type="text/javascript">
  dojo.require("dojo.widget.*");
  dojo.require("dojo.widget.Editor");
  //.. have fun with Dojo
</script>

So you just include the core Dojo source file and the rest is done by magic. The problem is that this magic relies on finding dojo in a path relative to this file and does not use the path you used to include the core file. I got this error:

Could not load 'dojo.widget.Editor'; last tried '__package__.js'

If you look (e.g. with FireBug) where Dojo tried to load the JavaScript from you will see

GET http://localhost:3000/mail/src/widget/Editor.js
GET http://localhost:3000/mail/src/widget.js
GET http://localhost:3000/mail/src/__package__.js
GET http://localhost:3000/mail/__package__.js

I looked through the documentation and searched for a way to tell Dojo where all it's files are. I found this solution:

<script src="/javascripts/dojo/dojo.js" type="text/javascript"></script>

<script type="text/javascript">
  dojo.setModulePrefix("dojo", "../javascripts/dojo/src");
  dojo.require("dojo.widget.*");
  dojo.require("dojo.widget.Editor");
  //.. have fun with Dojo
</script>

This worked for the JavaScript files but not for the CSS that is pulled down afterwards to make the editor look nice:

GET http://localhost:3000/javascripts/dojo/src/widget/Editor.js
GET http://localhost:3000/javascripts/dojo/src/widget/Toolbar.js
GET http://localhost:3000/javascripts/dojo/src/widget/RichText.js
GET http://localhost:3000/javascripts/dojo/src/widget/ColorPalette.js
GET http://localhost:3000/mail/src/widget/templates/HtmlToolbar.css

So the code that includes the CSS does not honor the dojo.setModulePrefix.

After whining at the mailings list I got this hint:

<script type="text/javascript">
 djConfig = {baseRelativePath: "../javascripts/dojo/"}; 
</script>

<script src="/javascripts/dojo/dojo.js" type="text/javascript"></script>

<script type="text/javascript">
  dojo.require("dojo.widget.*");
  dojo.require("dojo.widget.Editor");
  //.. have fun with Dojo
</script>

Now everything works fine:

GET http://localhost:3000/javascripts/dojo/src/widget/Editor.js
GET http://localhost:3000/javascripts/dojo/src/widget/Toolbar.js
GET http://localhost:3000/javascripts/dojo/src/widget/RichText.js
GET http://localhost:3000/javascripts/dojo/src/widget/ColorPalette.js
GET http://localhost:3000/javascripts/dojo/src/widget/templates/HtmlToolbar.css

Hopefully that will save someone a desperate evening.