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.
