Upload Image using CKeditor - Rails

Hello Guys,

   Today i've configure CKeditor (https://github.com/galetahub/ckeditor) to my Rails application and i found there is no upload button along with Image insert dialog.
So i've modified the ckeditor/config.js to below and it then show new tab called 'Upload' in Image insert dialog.

See. config.js

CKEDITOR.editorConfig = function (config) {

  // ... other configuration ...
  config.language = 'en';
  config.toolbar_regular = [
    { name: 'document', items: ['Source'] },
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
    '/',
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
    { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
    { name: 'insert', items: ['Table', 'Image', 'HorizontalRule', 'SpecialChar' ] },
    '/',
    { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
    { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
    { name: 'tools', items: [ 'Maximize'] },
    { name: 'plugins', items: ['CodeSnippet', 'Cite'] }
  ];
  config.toolbar_lite = config.toolbar_regular.concat({ name: "lite", items: ["lite_ToggleShow", "lite_AcceptAll", "lite_RejectAll"] });
    config.toolbar = 'regular';
  config.allowedContent = true;
   /* Filebrowser routes */
  // The location of an external file browser, that should be launched when "Browse Server" button is pressed.
  config.filebrowserBrowseUrl = "/ckeditor/attachment_files";
  // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Flash dialog.
  config.filebrowserFlashBrowseUrl = "/ckeditor/attachment_files";
  // The location of a script that handles file uploads in the Flash dialog.
  config.filebrowserFlashUploadUrl = "/ckeditor/attachment_files";
  // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Link tab of Image dialog.
  config.filebrowserImageBrowseLinkUrl = "/ckeditor/pictures";
  // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Image dialog.
  config.filebrowserImageBrowseUrl = "/ckeditor/pictures";
  // The location of a script that handles file uploads in the Image dialog.
  config.filebrowserImageUploadUrl = "/ckeditor/pictures";
  // The location of a script that handles file uploads.
  config.filebrowserUploadUrl = "/ckeditor/attachment_files";
  // Rails CSRF token
  config.filebrowserParams = function(){
    var csrf_token, csrf_param, meta,
        metas = document.getElementsByTagName('meta'),
        params = new Object();
    for ( var i = 0 ; i < metas.length ; i++ ){
      meta = metas[i];
      switch(meta.name) {
        case "csrf-token":
          csrf_token = meta.content;
          break;
        case "csrf-param":
          csrf_param = meta.content;
          break;
        default:
          continue;
      }
    }
    if (csrf_param !== undefined && csrf_token !== undefined) {
      params[csrf_param] = csrf_token;
    }
    return params;
  };
  config.addQueryString = function( url, params ){
    var queryString = [];
    if ( !params ) {
      return url;
    } else {
      for ( var i in params )
        queryString.push( i + "=" + encodeURIComponent( params[ i ] ) );
    }
    return url + ( ( url.indexOf( "?" ) != -1 ) ? "&" : "?" ) + queryString.join( "&" );
  };
  // Integrate Rails CSRF token into file upload dialogs (link, image, attachment and flash)
  CKEDITOR.on( 'dialogDefinition', function( ev ){
    // Take the dialog name and its definition from the event data.
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;
    var content, upload;
    if (CKEDITOR.tools.indexOf(['link', 'image', 'attachment', 'flash'], dialogName) > -1) {
      content = (dialogDefinition.getContents('Upload') || dialogDefinition.getContents('upload'));
      upload = (content == null ? null : content.get('upload'));
      if (upload && upload.filebrowser && upload.filebrowser['params'] === undefined) {
        upload.filebrowser['params'] = config.filebrowserParams();
        upload.action = config.addQueryString(upload.action, upload.filebrowser['params']);
      }
    }
  });
};

Hope this article helps you.

Unlock ReadOnly Model Object

Phasing some interesting problem after creating record for model which has HasMany relationship.

I have class say 'Category' & 'CategoryOptions'.

Category Has Many CategoryOptions

When i create record for CategoryOption using below syntax it locks the newly created object.

category = Category.first

category_option = category.category_options.create(params[:category_option])

If i do 

category_option.readonly?

=> true

Now i'm trying to update category_option using

category_option.update_attributes(params[:category_option])

but it raises Exception like 

ActiveRecord::ReadOnlyRecord

To remove readonly lock from object use below method

category_option.send(:instance_variable_set, :@readonly, false)

Now try

category_option.readonly?

=> false

category_option.update_attributes(params[:category_option]) works perfectly.

Hope this article will help you to remove Readonly lock from Model Object.

Install WKHTMLTOPDF

Hello Guys,

        Here i'm providing steps to install Wkhtmltopdf.

1. Download WKHTMLTOPDF source from http://wkhtmltopdf.org/downloads.html

2. Dobule click on downloaded source.

3. Go to terminal and type : which wkhtmltopdf. That gives you path like below.   /usr/local/bin/wkhtmltopdf4. wkhtmltopdf --version : gives you version no of installed wkhtmltopdf.

Delayed job to use specific connection via ruby

Hello Guys,
           Yesterday  i was phasing one interesting problem. Sharing single database between 2 rails application but now i've requirement to use application specific table for delayed jobs.

Lets assume i've application called DemoApp & TestApp. And both sharing single DB called 'demo_app_prod'. Now for TestApp i required separate DB called 'test_app_prod' which has single table called 'delayed_jobs'.

Step1:

at TestApp you have database.yaml like
 login: &login
  adapter: mysql
  username: admin
  host: localhost  
  password:
 
development:
  <<: *login
  database: demo_app_dev

test:
  <<: *login
  database: demo_app_test
 
production:
  <<: *login
  database: demo_app_prod  

staging:
  <<: *login
  database: test_app_prod

Step2:
at TestApp added migration called 
   rails generate migration add_delayed_job

  class AddDelayedJob < ActiveRecord::Migration
  def connection
    ActiveRecord::Base.establish_connection(Rails.env).connection
  end
 
  def up
    oldEnv = Rails.env
    Rails.env = 'staging' #set environment variable from your database.yml
    ActiveRecord::Base.establish_connection(Rails.env)   
    create_table :delayed_jobs, :force => true do |table|
      table.integer  :priority, :default => 0 
      table.integer  :attempts, :default => 0  
      table.text     :handler                      
      table.text     :last_error                  
      table.datetime :run_at                       
      table.datetime :locked_at                    
      table.datetime :failed_at                    
      table.string   :locked_by          
      table.timestamps
    end
    Rails.env = oldEnv
    ActiveRecord::Base.establish_connection ActiveRecord::Base.configurations[Rails.env]
  end
 
  def down   
    oldEnv = Rails.env
    Rails.env = 'staging'
    ActiveRecord::Base.establish_connection(Rails.env).connection
    drop_table :delayed_jobs
    Rails.env = oldEnv
    ActiveRecord::Base.establish_connection ActiveRecord::Base.configurations[Rails.env]
  end
end

Step3:

 In initializers/delayed_job.rb add below lines

Delayed::Job.class_eval do
  establish_connection ActiveRecord::Base.configurations["local"]
end

This the easy way to establish multiple db connection via ruby for delayed job.

Rebuild the corrupted legacy data.

Hello Guys,
        Yesterday i phase one problem regarding positioning with legacy database. For my rails application i have used the awesome_nested_set to manage nesting/threading. Case is to rearrange the position and for that i have used pretty nice method called 'rebuild!'.

Assume i have model called 'Post' and have nesting per Category .

# id: integer
# category_id: integer
# lft :integer
# parent_id :integer
# position :integer
# rgt :integer
class Post < ActiveRecord::Base
  acts_as_nested_set :scope => :category
end

In the legacy database, having 3 categories called 'Alpha', 'Beta', 'Gama'. In which category Alpha's data mess out.
To over come this problem invoke command on console.
> script/console
> category = Category.find_by_name('Alpha')
> category.posts.rebuild!

Now cross check the data and it results as per need. Hope this post is helpful to you guys. Cheers!!

Integrate Bcms Blog along with BrowserCMS

Hello Guys,

        Want to integrate bcms_blog along with browser CMS via ruby? then simply follow the below steps.

http://modules.browsercms.org/modules/3-bcms-blog

Install gem called

gem install bcms_blog 

Specify configuration in environment.rb as

config.gem 'bcms_blog', :version=>'1.1.1'

Modify routes.rb

map.routes_for_bcms_blog

map.routes_for_browser_cms

No go to the your directory from command prompt and execute below commands.

script/generate browser_cms 

rake db:migrate

Now login to cms web page & go to Content Library Menu and on left side panel you'll see the Blog section and under that 3 sub sections.

 a. Blog

 b. Blog Comment

 c. Blog Post

Now creating and publishing blog follow procedure listed below:

1. Go to Blog section & create it.

2. Create category for blog section from Categorization -> Category Type..

3. Add blog post from Blog Post section.

4. Now publish all and on front end you'll see successfully created blog.

5. If you get any error like 

     ERROR: undefined method `_blog_post_path' for #<#:..> 

    Then

      include Cms::BlogHelper in ApplicationHelper

    And

     add  below method under Cms::BlogHelper

     def self.included(controller_class)
        Rails.logger.info "~~ BlogHelper included in #{ controller_class.inspect.to_s }"
     end 

6. Now on posted blog you have option for Comment.. and user's added comment only visible if they moderate it and publish.

Hope you guys, enjoy my blog.. and it's helpful .. For more information see https://github.com/browsermedia/bcms_blog/blob/master/doc/release_notes.txt

Assign class or function to Dom element on the fly

Hello Guys,

        Want to assign the class to dom element on the fly? then simply use javascript function which listed below.

demo.html

Lets assume we have anchor tag on it's click we have to apply css class.

<a id="anchor" href="" target='_blank' class='active' onclick="javascript:open_url(this.id, 'google.com');"> Open this link in new window or tab </a>

// javascript  function

<script type='javascript'>

  function open_url(id, url){

   // verify dom has 'active' class or not
   if ($('#' + id).hasClass('active')) {
     if(url != ''){

    // it's open url in new window
     window.open(url);
   }
  }
}

</script>