How do I enable the WYMEditor for front end pages of Refinery CMS?

Question

I'm customizing a Refinery CMS instance and creating custom front end pages. I tried to follow the README for Wymeditor, but it seems that the Wymeditor embedded in RefineryCMS has been modified, and this isn't working.

https://github.com/wymeditor/wymeditor

I tried to view the source of a Refinery admin page with the editor, and just copied the Javascript and CSS source tags to include into my front end custom page, and added the class to the text area, and called the wymeditor() function, but it gave a Javascript error.

HTML source...
<link href="/assets/wymeditor/skins/refinery/skin.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/wymeditor/setup.js?body=1" type="text/javascript"></script>
<script src="/assets/wymeditor/functions.js?body=1" type="text/javascript"></script>
...

Yields console error

Uncaught TypeError: Cannot read property 'msie' of undefined boot_wym.js?body=1:117

Answer 1

Try a version of jquery older than 1.9. The .browser method has been removed in 1.9

You can also try this monkey patch of js

jQuery.browser = {};
  (function () {
    jQuery.browser.msie = false;
    jQuery.browser.version = 0;
    if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
      jQuery.browser.msie = true;
      jQuery.browser.version = RegExp.$1;
  }
})();

Answer 2

I added this immediately after the textarea. I wasn't able to get it to work with the JQuery that came with Refinery (even with jquery-migrate), and I wasn't able to get it to work with the Wymeditor that came with Refinery either. I don't believe this is the ideal solution, but it's all I could come up with for now. I'm sure it will break something else, as the console is giving errors like 'Object has no method carousel' now. I don't want to put an old JQuery in the application.js or application.haml layout, so hopefully this will localize breakage. Open to more ideas...

  = f.text_area  :body, rows: 15, cols: 100, class: 'wymeditor'
<script type="text/javascript" src="/assets/jquery/jquery.js"></script>
<script type="text/javascript" src="/assets/wymeditor/jquery.wymeditor.js"></script> 
:javascript
  jQuery(function() {
    $('.wymeditor').wymeditor();
    console.log("initialized .wymeditor: "+$('.wymeditor'));
  });