Wednesday, March 16, 2011

WYSIWYG editor for Rails3

If you are looking for a WYSIWYG editor for Rails3, then NicEdit is the one of the best editor.

NicEdit is a Lightweight and Inline Content Editor which is pretty easy to install and use with Rails application.
This can also be used with Rails3 latest version.

Steps to install:
  • Download nicEdit.js file from http://nicedit.com/index.php
  • Copy and paste the file in public/javascripts folder
  • Include js file in layout.
    <%= javascript_include_tag 'nicEdit' -%>
  • Paste following code above the form where you want to display Editor
<script type="text/javascript">
       bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
</script>
For ex- If you want to display the Editor in Users new form then paste the code above that form.
And thats it!
Any text area in that form will be displaying NicEditor with rows and columns which you mention
<%= f.text_area :news, :cols=>"100", :rows=>"15" %>

12 comments:

  1. there are others as well, which can be give a strong fight
    * rails-ckeditor - https://github.com/galetahub/rails-ckeditor
    * Tiny MCE - https://github.com/sandipransing/rails_tiny_mce
    * RedCloth - http://redcloth.org/

    ReplyDelete
  2. Thanks, even I have used rails-ckeditor, Tiny MCE, RedCloth in my other rails application. These are really gud one. Actually the NicEdit editor which I described in this post is one of the lightest and simplest to implement.

    ReplyDelete
  3. How did you get the editor icons to show up?
    I have the gif file in the assets/images folder but don't seem to be able to link to it from the js file.

    ReplyDelete
    Replies
    1. In js file chage,

      iconsPath : '../nicEditorIcons.gif',
      to
      iconsPath : '../assets/nicEditorIcons.gif',

      Delete
    2. This way function to me. I'm using rails 3.2.x

      Delete
  4. Anonymous, for Rails 3.1 you need to find in nicEdit.js iconsPath line... and change
    ../nicEditorIcons
    to
    /assets/nicEditorIcons.gif

    ReplyDelete
  5. @Oleg: Thank for your guide very much. nicEditor is working for my apps now. It is really simple.

    ReplyDelete
  6. I am astonished how easy it was to install. Did exactly the job I needed.

    ReplyDelete
  7. Fantastic and very simple to install and use.

    ReplyDelete
  8. thanks a lot it works, very simple and easy to install and use

    ReplyDelete
  9. I install it too. It is great. Could you give an example of how to display the content separate and as a whole? Thanks.

    ReplyDelete
  10. Thanks a lot dear it works for me and i am very happy to using it, very simple and easy to install and use. I tried lot of text editor like Tinymce, Ckeditor and others but this is the best.
    Thanks again for this article...

    ReplyDelete