CKEditor for rails asset pipeline

1. Include ckeditor_rails in Gemefile

  gem 'ckeditor_rails'

2. Add to your app/assets/javascripts/application.js after //= require jquery_ujs to work with jQuery

//= require ckeditor-jquery

3. Add ckeditor class to text area tag

<%= f.text_area :content, :class => 'ckeditor' %>

4. Initialize CKEditor in Javascript file

<script type="text/javascript"> 
  $('.ckeditor').ckeditor({
     width: '735',
     height: '0',
     // optional config
  });
</script>


Add to ck-editor in HTML:

1. <textarea name="editor1" id="editor1" rows="10" cols="80"></textarea>
<script type="text/javascript">
  CKEDITOR.replace('editor1')
</script>

Image zoom Simple-jQuery-Image-Magnifier-Enlargement-Plugin-imagezoom.html

Basic Usage:

Js: 

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

2	<script src="imagezoom.js"></script>

HTML:

<img src="<%= @product.image %>" data-imagezoom="true" data-magnification="3" data-zoomviewsize="[270,330]" class="simpleLens-big-image img-responsive" style="width: 270px; height: 330px">

Css:

.tgl {

  display: none;

}

.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {

  box-sizing: border-box;

}

.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {

  background: none;

}

.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {

  background: none;

}

.tgl + .tgl-btn {

  outline: 0;

  display: block;

  width: 4em;

  height: 2em;

  position: relative;

  cursor: pointer;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

}

.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {

  position: relative;

  display: block;

  content: "";

  width: 50%;

  height: 100%;

}

.tgl + .tgl-btn:after {

  left: 0;

}

.tgl + .tgl-btn:before {

  display: none;

}

.tgl:checked + .tgl-btn:after {

  left: 50%;

}

.tgl-ios + .tgl-btn {

  background: #fbfbfb;

  border-radius: 2em;

  padding: 2px;

  -webkit-transition: all .4s ease;

  transition: all .4s ease;

  border: 1px solid #e8eae9;

}

.tgl-ios + .tgl-btn:after {

  border-radius: 2em;

  background: #fbfbfb;

  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;

  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;

  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);

}

.tgl-ios + .tgl-btn:hover:after {

  will-change: padding;

}

.tgl-ios + .tgl-btn:active {

  box-shadow: inset 0 0 0 2em #e8eae9;

}

.tgl-ios + .tgl-btn:active:after {

  padding-right: .8em;

}

.tgl-ios:checked + .tgl-btn {

  background: #86d993;

}

.tgl-ios:checked + .tgl-btn:active {

  box-shadow: none;

}

.tgl-ios:checked + .tgl-btn:active:after {

  margin-left: -.8em;

}

URL: 

http://www.jqueryscript.net/zoom/Simple-jQuery-Image-Magnifier-Enlargement-Plugin-imagezoom.html