WYM on Rails

WYM Editor Helper is a plugin that makes it dead easy to incorporate the WYM editor into your Rails views. I know there’s already plugins out there to use FCKEditor or TinyMCE, but if you’re as much into standards as we are, you will definitely like WYM better. It’s getting late, so without further ado, here’s a paste of the README ;

About WYM

WYMeditor is a web-based WYSIWYM XHTML editor.

WYMeditor’s main concept is to leave details of the document’s visual layout, and to concentrate on its structure and meaning, while trying to give the user as much comfort as possible (at least as WYSIWYG editors).

WYMeditor has been created to generate perfectly structured XHTML strict code, to conform to the W3C XHTML specifications and to facilitate further processing by modern applications.

With WYMeditor, the code can’t be contaminated by visual informations like font styles and weights, borders, colors, ... The end-user defines content meaning, which will determine its aspect by the use of style sheets. The result is easy and quick maintenance of information.

As the code is compliant to W3C XHTML specifications, you can for example process it using a XSLT (at the client or the server side), giving you a wide range of applications.

Read more about WYM at wymeditor.org/en/


Follow these steps to use:

  • From your project’s root, run:
    ruby script/plugin install svn://zuurstof.openminds.be/home/kaizer/svn/rails_stuff/plugins/wym_editor_helper
    rake wym:install
  • Put <%= wym_editor_initialize %> in the view that will host the text editing form. Prefereably this goes into your html’s HEAD , to keep our html W3C valid. Use <% content_for :head do %> <%= wym_editor_initialize %> <% end %> in the view that needs the editor, and <% yield :head %> in the layout. This means the editor will only load when it is truly called for.
  • in your form, instead of i.e. <%= text_area :article, :content %> ,
    use <%= wym_editor :article, :content %>
    OR add a ‘wymeditor’ class to the textarea
  • add a ‘wymupdate’ class to the submit button

Extra info

This plugin uses an svn:external to automatically get the latest version of WYMeditor. If for some reason the checked out version is not working, you can install a different version like so:

    svn export svn://svn.wymeditor.org/wymeditor/tags/0.4 vendor/plugins/wym_editor_helper/assets/wymeditor

To see what versions are available, check the repository browser at http://files.wymeditor.org/wymeditor/ Keep in mind that if you check out a newer version of WYM , you need to re-run the wym:install rake command to actually copy the wym files to the public dir. If you do so, be sure to first back up your configuration file (/javascripts/boot_wym.js) if you made any changes to it.

For possible configuration options, you can look at the examples provided in /wymeditor/tests (the ones in /wymeditor/examples are not working at this moment).

Also have a look at the WYMeditor trac for more documentation: http://trac.wymeditor.org/trac/wiki

Any feedback is greatly appreciated!

In a reading mood?

I am in no way responsible for any sillyness going on below this line:

undefined tag `gravatar'

i don`t know but is this working for you ? i have major problems with prototype 1.6 because of JQuery… also i use a page boot loader that seems to be destroyed throu the plugin… i will investigate and also try jQuery.noConflict(); i leave some feedback here….

undefined tag `gravatar'

so if you use jQuery.noConflict(); everything is fine so far….

undefined tag `gravatar'

you also have an error in your source code… so the complete thing is not working in ie6… jQuery(function() { jQuery(’.wymeditor’).wymeditor({ xhtmlParser: ‘xhtml_parser.js’, cssParser: ‘wym_css_parser.js’, }); });

i hope you see the comma after the cssParser… please remove it and it will work fine in ie6 and ie7…..

undefined tag `gravatar'

Hello Helmut, thanks for your feedback!

I updated boot_wym.js as you suggested, and also updated the installation procedure to a better practice, as suggested on a different site.

undefined tag `gravatar'

yeah thank you for your great plugin… everything is working fine now… just safari gets blown away but this is not so important and a wymeditor problem i would think….

undefined tag `gravatar'

typo: <%= yield :head … missing ”=”

undefined tag `gravatar'

gosh, i’m getting some serious rubyenrails conference flashbacks.. thanks roger, updated here and in the readme

undefined tag `gravatar'

Thank you very much for this helper. It is really great, but I wonder how I could edit some settings like changing the width*height of the editor, or add some predefined classes to it or so? Could you give me a hint in those too?

Thanks for your great work!

undefined tag `gravatar'

Hi depi,

To change the dimensions of the editor, i think you should just alter the css rules of the/all textarea’s, WYM will use the space that it gets (do correct me if i’m wrong).

To add predefined classes, you’ll need to edit boot_wym.js. Sample;

var $j = jQuery.noConflict(); $j(function() { $j(’.wymeditor’).wymeditor({ xhtmlParser: ‘xhtml_parser.js’, cssParser: ‘wym_css_parser.js’, //classes panel classesItems: [ {‘name’: ‘float-left’, ‘title’: ‘P: left’, ‘expr’: ‘p’}, {‘name’: ‘float-right’, ‘title’: ‘P: right’, ‘expr’: ‘p’} ], });

//editor css values for visual feedback
          editorStyles: [
            {'name': '.float-left',
             'css': 'color: #999; border: 2px solid #ccc;'},
             {'name': '.float-right',
              'css': 'color: #999; border: 2px solid #ccc;'}

This would add two classes to the classes panel; the classesItems property handles the adding to this panel, and also the real adding of the classes. The editorStyles property is to make clear to users when a class has been applied. For example, you could give a paragraph with a ‘notice’ class a green border.

There are more options the wym initializer takes, have a look at the included examples in /wymeditor/tests

undefined tag `gravatar'

Great point and very interesting food for thought. I’m not sure I have any clients I can replicate this with, but will bear in mind for the future. Regards

undefined tag `gravatar'

I want to have 2 instances of the editor on one page, but that doesn’t seem to work. params of the 2nd instance is always empty. Any idea why?

Thanks Jens

undefined tag `gravatar'

Sorry stupid me! I’ve forgotten to add wymupdate class to the submit button. So actually both instances weren’t updated. Now everyting works as supposed.


Comments are closed for this article.

About this article

You’re reading an entry titled “WYM on Rails”. Written

undefined tag `time_ago_in_words'
ago (20/09/2007) — and archived under editor, plugin, rails, standards, w3c, WYM. So far, 12 people (dis)agreed with me, what do you think?

What the fuzz is all about

  1. 2 pages are tagged with WYM
  2. 1 page is tagged with absolute-urls
  3. 1 page is tagged with arrrrcamp
  4. 2 pages are tagged with documentation
  5. 2 pages are tagged with editor
  6. 2 pages are tagged with extension
  7. 2 pages are tagged with extensions
  8. 1 page is tagged with minitorial
  9. 1 page is tagged with navigation
  10. 10 pages are tagged with radiant
  11. 4 pages are tagged with rails
  12. 2 pages are tagged with ruby
  13. 2 pages are tagged with shell
  14. 1 page is tagged with sifr
  15. 2 pages are tagged with troubleshooting

Github activity

More places where you can find me

Back to top