Ruby on Rails - How to Build a Blog using Froala in WYSIWYG - ruby on rails tutorial - rails guides - rails tutorial - ruby rails
- We will create use of clearance for user authentication and Froala-WYSIWYG to provide a rich editor that will enable us to style our contents.
Rails Application Setup
- The -T flag tells Rails to create a new application without the default test suite.
- Open your Gemfile and add the following gems.
- Clearance is a simple authentication tool built for Rails.
- You will be using it for authentication on the blog you will be building.
- The other gem - bootstrap-sass will enable you to style your application using Bootstrap.
- Now install the gem by running bundle install from your terminal.
- Using your text editor, rename assets/stylesheets/application.css to assets/stylesheets/application.scss.
- Then apphend the line below:
- Once that is done, you need to run the generator for clearance. Run the command below from your terminal.
- It will generate the following output on your terminal:
- Clearance does a lot of heavy lifting for us that we will not dive into in this tutorial.
- You can check out its Github repository to see all it has to offer.
- Let us implement the steps shown to us above.
- Using your text editor navigate to config/environments/development.rb, and add the line below;
- Add it just above the end delimiter.
- Create a new file called _navigation.html.erb in your views/layouts directory.
- You will use this for our navigation.
- Paste the code below into the newly created file:
- Navigate to views/layouts/application.html.erb and make yours look like this:
Installing Froala
- Open up your Gemfile and add the following gems:
- The first is a gem that allows us to easily make forms in Rails. The next is the gem for Froala-WYSIWYG.
- Run bundle install.
- You need to import some assets into your application.
- Add the code below to your app/assets/stylesheets/application.scss, just above the *= require_tree . line.
- For your app/assets/javascripts/application.js, add the code:
- Now you have Froala-WYSIWYG all set up
Creating Articles Controller and Model.
- Open your terminal and run the command to generate your ArticlesController.
- ยท This will generate a bunch of files and directories for us.
- Navigate to app/controllers/articles_controller.rb and paste in the code below:
- In the code above, we have all the actions needed to create an article.
- The line:
- Restricts unauthorized users from editing, deleting, or creating a new article.
- Let us set up our views, create the needed files by running these commands:
- Paste the code below into the respective files.
- The code for our form:
- The main things that stand out in the code above are:
- These two are very important for Froala-WYSIWYG to work. Let's make progress.
ruby on rails tutorial tags - ruby , rail , ruby on rails , rail forum , ruby on rails tutorial , ruby tutorial , rails guides , rails tutorial , learn ruby
Edit Page
learn ruby on rails tutorial - ruby on rails edit page - ruby on rails
Index Page
New Article Page
Show Page
- In the code for the show page, you will see that the body of the articles is rendered in a div whose class is fr-view. Froala-WYSIWYG requires this to be like so if you want the styles to be shown on the page.
- With all these done, let us set up our routes. Here is what your routes should look like:
- Finally, you need to generate your Article model. Run the command to do so.
- Next migrate your database.
- You can now view your new blog. Start up your server rails server, point your browser to http://localhost:3000 to see what you have.
- You can now view your new blog. Start up your server rails server, point your browser to http://localhost:3000 to see what you have.