Geek Answers Handbook

What does WYSIWYG work well with jQuery and Ruby on Rails 3.1 (Sprockets)?

I'm having trouble creating any "general" WYSIWYG work with Rails. We even had to do one with RedCloth at the moment.

I tried using tinymce-rails but could not get it to work. Also tried nicEdit , which worked, but only when calling the online library (and also looks abandoned).

Has anyone worked with a good WYSIWYG that supports jQuery and Rails 3.1 (Sprockets)?

+7
source share
6 answers

I am using ckeditor in my Rails 3.1 application.

Just drop the folder into lib / assets / javascripts, and whenever you need it, reference it like this:

= javascript_include_tag "ckeditor/ckeditor.js"

And in javascript:

 :javascript $(function(){ CKEDITOR.replace( 'input', { // Optional params: skin : 'office2003', height: '700px' }); })
+13
source

After a long struggle with this problem, I came up with a solution for using the standard tinyMCE with Rails 3.1 and the asset pipeline.

  • I started with the jQuery tinyMCE package.
  • Create a directory in the provider for tinyMCE: /vendor/assets/javascripts/tiny_mce
  • Put only jquery.tinymce.js inside /vendor/assets/javascripts/tiny_mce
  • Put the remaining tinyMCE files in a directory in your /public/javascripts folder inside a directory called tiny_mce

  • Add tinyMCE to your application.js like this:

     //=require jquery ... //=require tiny_mce/jquery.tinymce.js

  • I initialize tinyMCE in my application.js and also set the script_url path to tell tinyMCE that it supports the files that now live in my public/javascripts/tiny_mce :

     $('.tinymce').each(function(i){ $(this).tinymce({ script_url : '/javascripts/tiny_mce/tiny_mce.js', ...

That should work. Now you use the asset pipeline to load tinyMCE and serve the helper resources and javascripts from the shared directory.

+8
source

The Mercury editor looks promising. I plan to try it on the next rails project.

http://jejacks0n.github.com/mercury/

+3
source

Try MarkitUp

http://markitup.jaysalvat.com/home/

0
source

Luuf already mentioned Aloha-Editor. Although he is still in a difficult development, he looks pretty promising.

Just put the aloha-config.js file anywhere on your resource path, aloha files will be sent (i.e.) to the provider / assets.

Configuration Example:

  (function(window, undefined) { if (window.Aloha === undefined || window.Aloha === null) { var Aloha = window.Aloha = {}; } Aloha.settings = { logLevels: {'error': true, 'warn': true, 'info': true, 'debug': false, 'deprecated': true}, baseUrl: "/assets/lib", errorhandling: false, plugins: false }; })(window);

The baseUrl line is the most important. Setting it to / assets / lib seems to provide compatibility with the asset pipeline.

Not tried concatenation yet, will post a comment when I know how it behaves.

Hello!

0
source

Aloha Editor

http://aloha-editor.org/

It’s not easy between this and Mercery, but Aloha has a more pleasant “feel” and has broader browser support.

0
source

More articles:


All Articles