Create an article using ‘WYSIGWYG’ Editor in ruby on rails

                The word wysigwyg stands for ‘What You See is What You Get’ in computing. a WYSIWYG editor is a system in which content (text and graphics) can be edited in a form closely resembling its appearance when printed or displayed as a finished product, such as a printed document, web page or slide presentation.

The WYSIWYG HTML Editor written in Javascript that enables rich text editing capabilities for your applications.

The following is the installation process of wysigwyg editor in rails application:

1.) Add the below line into your Gemfile of rails application.

       gem "wysiwyg-rails"

2.) Run ‘bundle’ or ‘bundle install’ command in terminal.

3.) Set assets libraries for stylesheet in ‘application.css’ or ‘application.css.scss’

       @import "froala_editor.min";

       @import "froala_style.min";

       @import "font-awesome-sprockets";

       @import "font-awesome";

       @import 'plugins/char_counter.min.css';

       @import 'plugins/code_view.min.css';

       @import 'plugins/colors.min.css';

       @import 'plugins/emoticons.min.css';

       @import 'plugins/file.min.css';

       @import 'plugins/fullscreen.min.css';

       @import 'plugins/help.min.css';

       @import 'plugins/image_manager.min.css';

       @import 'plugins/image.min.css';

       @import 'plugins/line_breaker.min.css';

       @import 'plugins/quick_insert.min.css';

       @import 'plugins/special_characters.min.css';

       @import 'plugins/table.min.css';

       @import 'plugins/video.min.css';

4.) Set assets libraries for javascript in ‘application.js’ or ‘application.js.coffee’

       #= require froala_editor.min.js

       #= require plugins/align.min.js

       #= require plugins/char_counter.min.js

       #= require plugins/code_beautifier.min.js

       #= require plugins/code_view.min.js

       #= require plugins/colors.min.js

       #= require plugins/emoticons.min.js

       #= require plugins/entities.min.js

       #= require plugins/file.min.js

       #= require plugins/font_family.min.js

       #= require plugins/font_size.min.js

       #= require plugins/fullscreen.min.js

       #= require plugins/help.min.js

       #= require plugins/image.min.js

       #= require plugins/image_manager.min.js

       #= require plugins/inline_style.min.js

       #= require plugins/line_breaker.min.js

       #= require plugins/link.min.js

       #= require plugins/lists.min.js

       #= require plugins/paragraph_format.min.js

       #= require plugins/paragraph_style.min.js

       #= require plugins/print.min.js

       #= require plugins/quick_insert.min.js

       #= require plugins/quote.min.js

       #= require plugins/save.min.js

       #= require plugins/table.min.js

       #= require plugins/special_characters.min.js

       #= require plugins/url.min.js

       #= require plugins/video.min.js

       #= require third_party/embedly.min.js

       #= require third_party/image_aviary.min.js

       #= require third_party/spell_checker.min.js

5.) create a model to store the details into the database named as ‘Article’ model with fields name             ‘heading’, ‘created by’, ‘description’ and ‘release date’.

6.) Now, in the view we have to set the textarea element with ‘article_description’ id.

7.) To set the ‘WYSIGWYG’ editor for textarea.

         we have to set the following js in any compatile js file as we can able to access it in that perticular view.

        <textarea class="form-control text required" name="article[description]" id="article_description" style="display: none;">                      </textarea>

        Jquery code:

       $(document).ready(function(){

         $("#article_description").froalaEditor({

            imageUploadURL: '/upload_image',

            method: "POST",

            imageUploadParams: {

              id: 'my_editor'

           }

         });

     });

            In the above code, we have written froalaEditor() method to set the ‘wysigwyg’ editor for description textarea. Here, if suppose someone want to upload images in the description using wysigwyg editor, bydefault it gets store into the ‘wysigwyg’ editor server and after some time it gets removed from that server, it provides temporary storage. So, the better way to store that images into our own server for permanently. For the same reason we have written above javascript to store the uploaded images for the description into our local system storage or on production system storage if application on the production server.

      Ruby controller code:

      def upload_image

        if params[:file]

          FileUtils::mkdir_p(Rails.root.join("public/uploads/files"))

          ext = File.extname(params[:file].original_filename)

          ext = image_validation(ext)

          file_name = "#{SecureRandom.urlsafe_base64}#{ext}"

          path = Rails.root.join("public/uploads/files/", file_name)

          File.open(path, "wb") {|f| f.write(params[:file].read)}

          view_file = Rails.root.join("/download_file/", file_name).to_s

          render :json => {:link => view_file}.to_json

       else

         render :text => {:link => nil}.to_json

      end

    end

            

            In the above controller code, we are creating a random file name of input parameter ‘params[:file]’ and storing it into the /public/uploads/files folder. As well if we delete the uploaded image using ‘wysigwyg’ editor it would be delete from the /public/uploads/files folder.

            The wysigwyg editor allow us to edit the description in the ‘HTML’ format and also support the ‘Bootstrap’ which makes us to build the flexible aritcles as per the clients requirement.