I have learned a lot from this video. Nice!

Similarities Between Spanish and Cebuano

Aside from watching Spanish-FIlipino videos, I’m currently exploring the power of ckeditor. https://ckeditor.com I am just amazed of what this WYSIWYG text editor can do. I even created an issue in their github repo to support pasting from PDF. Hehe

https://github.com/ckeditor/ckeditor5/issues/10115

Tried to install ckeditor using gem in rails but I was not successful because of this update in rails 6 that JavaScript directory has been moved into a separate directory that is handled by webpacker. https://dev.to/morinoko/adding-custom-javascript-in-rails-6-1ke6

If you check your gemfile there is a gem called webpacker this is what rails uses to make webpack work in an app. In rails lower version JavaScript is handled by the rails asset pipeline. If you also check ckeditor gem for rails github repo, it says it supports rails 5.x, 4.2.x integration. https://github.com/galetahub/ckeditor

This is why I’m using CDN to integrate ckeditor in rails 6.

To do that, just simply add

in the application.html.erb file.

In your text area, just simply include 'ckeditor form-control'.

Ex.

<%= f.text_area :description, class: 'ckeditor form-control' %>

The following distributions are available:

basic - the Basic preset

standard - the Standard preset

standard-all - the Standard preset together with all other plugins created by CKSource*

full - the Full preset

full-all - the Full preset together with all other plugins created by CKSource*

http://cdn.ckeditor.com/

Note:

  1. Need to use raw to unescape html. Ex. <%= raw(@post.description) %>
  2. Rails is loading js inconsistently due to turbolinks. My temporary fix is I commented turbolinks in the application.js file. This is the only solution I know for now.

Now you can play around with your ckeditor integrated in rails 6. :)

You can check my example at: http://simple-rails-crud.herokuapp.com/posts/2

Github repo: https://github.com/jsafe00/dockerize-ruby-on-rails-crud/tree/ckeditor-cdn