CODEWITHSUNDEEP
ruby-on-railsckeditor
Mike Glaz
Mike Glaz

Reputation: 5392

rails 4 with CKeditor

I cannot get the galetahub ckeditor gem to work with Rails 4 for me. I searched for any problems online but cannot find any. I'm following the instructions exactly.

And I think that's it. But my text area does not convert to a CKeditor area for some reason.

Upvotes: 10

Views: 16982

Answers (6)

ajknzhol
ajknzhol

Reputation: 6460

STEP 1: Add gem 'paperclip' and gem "ckeditor" in your gemfile.

STEP 2: Bundle Install.

STEP 3: rails generate ckeditor:install --orm=active_record --backend=paperclip

STEP 4: Place config.autoload_paths += %W(#{config.root}/app/models/ckeditor) in application.rb

STEP 5: Place mount Ckeditor::Engine => "/ckeditor" if not present in routes.rb already and run db:migrate

STEP 6: Open application.html.erb and place this <%= javascript_include_tag 'ckeditor/ckeditor.js' %> in header.

STEP 7: Place this in footer(above the body tag) in application.html.erb

<script type="text/javascript">$(document).ready(function() {
    if ($('textarea').length > 0) {
        var data = $('textarea');
        $.each(data, function(i) {
            CKEDITOR.replace(data[i].id);
        });
    }
});</script>

STEP 8: Restart the WEBrick SERVER.

That's it.

Else

Download the CKEditor Zip file, extract the files and place them in the sub directory “javascripts/ckeditor”, add the main JS file to the layout..

javascript_include_tag 'ckeditor/ckeditor.js'

Place this in footer(above the body tag) in application.html.erb

<script type="text/javascript">$(document).ready(function() {
    if ($('textarea').length > 0) {
        var data = $('textarea');
        $.each(data, function(i) {
            CKEDITOR.replace(data[i].id);
        });
    }
});</script>

Upvotes: 24

The Whiz of Oz
The Whiz of Oz

Reputation: 7043

In case you are having trouble making it work with active admin, make sure to put this:

config.register_javascript 'ckeditor/ckeditor.js'
config.register_javascript 'ckeditor/init.js'

Into config/initializers/active_admin.rb

Upvotes: 0

Terry Bu
Terry Bu

Reputation: 899

ajkumar basically answered the question well already, but if you are still lost, all you need to do is download the js file, include it in your html, have a script snippet included in the HTML to activate ckeditor on a certain textarea tag ID, and then change the class of the "textarea" tag you want to change to ckeditor. Quick sample below

<!DOCTYPE html>
<html>
    <head>
        <title>A Simple Page with CKEditor</title>
        <!-- Make sure the path to CKEditor is correct. -->
        <script src="../ckeditor.js"></script>
    </head>
    <body>
        <form>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
            </textarea>
            <script>
                // Replace the <textarea id="editor1"> with a CKEditor
                // instance, using default configuration.
                CKEDITOR.replace( 'editor1' );
            </script>
        </form>
    </body>
</html>

Upvotes: 1

Humphryman
Humphryman

Reputation: 88

I have the same problem using rails 4 and apparently the problem is that the form helper

form.cktext_area

Or in your case

f.input :description, as: :ckeditor

it's not generating what it supposed to generate, and you don't have to load the editor manually, the only thing you need to do is to is to add the class 'ckeditor' to your textarea and it will load automatically, like this:

f.cktext_area :body, :class => 'ckeditor'

Upvotes: 7

Informatom
Informatom

Reputation: 123

Meanwhile the Galetahub gem has been updated, but it has to be updated in your app manually. Read the github page: https://github.com/galetahub/ckeditor.

Upvotes: 1

Marcelo De Polli
Marcelo De Polli

Reputation: 29301

The galetahub gem is currently broken on Rails 4. This one is working fine though: https://github.com/tsechingho/ckeditor-rails

Upvotes: 0

Related Questions