17 Mar
Posted by dan as Javascript, Ruby on Rails
Tags: Javascript, plugins, wysiwyg, xinha
I discovered Xinha a couple of days ago after coming across this blog post and I was quite impressed with it. After playing around with it a little, I noticed it does not have the same issues with pre tags that both TinyMCE and FCKeditor exhibit variations of. This makes it a good choice if you are displaying a lot of code. The issues deal with replacing new line characters with br tags within pre tags and leads to some display and formatting problems. I wrote about my attempt to wrangle TinyMCE in a previous post. Xinha has not exhibited these issues and the supplied skins look great too.
After my initial testing of Xinha, I decided it would be a good time to finally create a plugin. I started with the TinyMCE plugin and adapted the code to work with Xinha. Since this is my first plugin and some cargo culting was involved, let me quickly remind you that there will most likely be bugs or errors at this point and that not everything is working correctly. That being said, the basics are working and unless you want to use some of the plugins mentioned below, you should not run into too many problems (key words being ’should not’).
To get started, install the plugin and run the rake task with
script/plugin install \
svn://rubyforge.org/var/svn/xinha/trunk
rake xinha:scripts:install
Next thing to do is let your controller know you want to use Xinha. Xinha has some initial setup options and the defaults are set to ‘/javascripts/xinha/’, ‘en’ and ‘blue-look’. If you need to change any of them, they are changed through the setup hash and not through the options hash. The javascript requires _editor_ at the beginning of those variables, but you should not use :_editor_skin to change the skin, just use :skin.
The options hash is where you can change all the other configuration options. Except for the editors and plugins options, the name (hash key) of the option should be the same as the xinha_config.option name but with ruby naming conventions (lowercase and an underscore instead of a space). The value of both the editors and plugins options are an array of strings. Although not technically required, if you don’t specify anything for editors, nothing will happen. Here is an example of what the code in your controller might look like.
uses_xinha(:setup => {
:skin => 'silva' },
:options => {
:editors => ['post_body'],
:plugins => ['Equation','FindReplace','GenericPlugin','GetHtml','HorizontalRule','InsertAnchor','InsertSmiley','SaveSubmit'],
:height => '500px' },
:only => [:new, :edit])
From here, the last thing to do is add the appropriate code to your layout. It couldn’t be simpler, just add
<%= include_xinha_if_used %>
inside the head element. The above snippets load up the editor only for the new and edit actions of my example imaginary post scaffolding. Nothing happens with any of the other actions. All of the javascript, images and css are only loaded when necessary.
I have not had the time to test all of the Xinha plugins. I did uncover a few bugs so I want to mention them briefly. If you load all of the plugins, including the legacy htmlArea plugins, one of them, not sure exactly which one, is nice enough to wrap your text with <html> <head> </head> <body spellcheck=”false” > … </body> </html>. It would appear to be related to spellChecker, but removing that plugin did not appear to fix the problem. Removing all the legacy plugins prevents this from happening and some other random issues. Because of this, I am going to recommend you only use the Xinha specific plugins. If you need to use one of the legacy plugins and get it to work, play nicely and let us know what you did to make it work.
Some of the plugins also utilize php code. The good ole webrick server that loads with script/server does not do so well with those plugins and they are lacking functionality. These plugins are
That list includes some useful plugins and I hope to get at least a few of them working using ruby instead of php. Please don’t hold your breath though, I have no idea how long it will be until I can get any or all of them working. If you would like to help, it would be much appreciated. I set up a rubyforge project for this plugin here. If you find any bugs or have any suggestions, feel free to leave a comment here or use rubyforge.
Another thing to keep in mind, the initial release is at best considered an alpha release and I know there are several things that need to be added before this plugin creates a fully functional Xinha editor for Rails. Unfortunately, if I waited until I figured everything out, this may never have been released period and which is why it is available now for you to try out. This also is my first attempt at a plugin, so if a rookie mistake has been made somewhere along the line, let me know so I can fix it and not look like a noob. Either way, creating a Rails plugin has been a good learning experience and I hope you find it useful, even if not all of it works right away.
Tags: Javascript, plugins, wysiwyg, xinha
8 Responses
Irfan Baig
April 3rd, 2008 at 9:48 pm
1On running script/server got this
……
from …/vendor/plugins/xinha-plugin/lib/xinha.rb:66:in `included’
from …/vendor/plugins/xinha-plugin/init.rb:81:in `eval’
init.rb => require ‘xinha_helper’
Irfan Baig
April 3rd, 2008 at 10:00 pm
2solution is the last line above
nice job!
dan
April 6th, 2008 at 6:46 pm
3I noticed that my use of xinha-plugin as part of the plugin name caused some issues and moved the rubyforge page to http://rubyforge.org/projects/xinha/ and changed the body of the post to reflect this too. You shouldn’t have that problem anymore Irfan. Thanks for the comments
David Ramalho
July 10th, 2008 at 10:24 am
4Hey :), caught your plugin via Google and started using, it beats setting up xinha by hand :), so thank you .
Now, I wanted to configure a toolbar with different buttons and separators and the plugin wasn’t liking Arrays with Arrays very much so I added some recursive power to it and now you can setup the toolbar option via your plugin , yay
I’ve added
def stringify_array(values)
text = “[ ”
text += values.collect{|v| if v.instance_of? Array then stringify_array(v) + “,” else “‘” + v + “‘,” end }.join.chop
text += ” ]”
end
to xinha_helper.rb
and now you can do stuff like
uses_xinha(:setup => {
:skin => ’silva’ },
:options => {
:editors => [’content_text_node_content’],
:toolbar => [ [’separator’],[”separator”,”bold”,”italic”,”underline”,”strikethrough”],[’separator’] ]
},
:only => [:new, :edit, :post_edit])
Again, thank you and hopefully I’ve helped a bit too
Terence
August 2nd, 2008 at 1:19 am
5Thanks for this plugin. I think it’s quite impressive. I don’t know much about Ruby or Rails for that matter. I managed to get it working quite easily.
The only comment I would make is that once you have done everything as described above, edit this line :editors => [’post_body’]. Replace the post_body with the id of your field. If I had realised this from the beginning it would have saved me an hour of trying to understand how Xinha works.
Thanks again.
Gavin
August 12th, 2008 at 9:39 pm
6Hey - Im a newbie to RoR but this looks like just the tool I need to set up a blogging site and write blogs quickly, online.
Could someone please suggest the best method of storing the blog content though? ie. what happens to the info in the Xinha text field once I click submit?
Can this be stored as text on a database?
thanks
sgk
November 17th, 2008 at 1:11 pm
7Just installed xinha in a rails app for a client. Works great on the dev box, thanks alot for this. However, when pushed to the server it loads on first use but then no longer functions after first “update”. ie. “edit” or “new” only show as basic rails text_area and xinha does not appear. Killing server process and restart, works once then fails. Anybody else experienced this problem?
I m going to try changing javascript caching, but jsut thought maybe there d be fast track to solving this.
Thanks, sgk
sgk
November 17th, 2008 at 2:52 pm
8please strike that lost the pasted text
RSS feed for comments on this post · TrackBack URI
Leave a reply
Categories
Archives
Links
Support MoreBS.com
Del.icio.us Links
© 2008 MoreBS.com | BloggingPro theme by: Design Disease