#3 Add WYSIWYG editor

Author: marjinal1st

Gemfile.lock

@@ -2,6 +2,8 @@ PATH
   remote: .
   specs:
     kebapage (0.0.1)
+      bootstrap-sass
+      bootstrap-wysihtml5-rails
       friendly_id
       haml (~> 4.0.2)
       haml-rails
@@ -38,6 +40,10 @@ GEM
       tzinfo (~> 0.3.37)
     arel (4.0.1)
     atomic (1.1.14)
+    bootstrap-sass (3.0.3.0)
+      sass (~> 3.2)
+    bootstrap-wysihtml5-rails (0.3.1.23)
+      railties (>= 3.0)
     builder (3.1.4)
     erubis (2.7.0)
     friendly_id (5.0.2)
@@ -78,6 +84,7 @@ GEM
       rake (>= 0.8.7)
       thor (>= 0.18.1, < 2.0)
     rake (10.1.1)
+    sass (3.2.13)
     sprockets (2.10.1)
       hike (~> 1.2)
       multi_json (~> 1.0)

app/assets/javascripts/kebapage/application.js

@@ -10,4 +10,8 @@
 // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
 // about supported directives.
 //
+//= require jquery
+//= require jquery_ujs
+//= reuqire bootstrap
+//= require bootstrap-wysihtml5
 //= require_tree .

app/assets/javascripts/kebapage/static_pages.js

@@ -1,2 +1,10 @@
 // Place all the behaviors and hooks related to the matching controller here.
 // All this logic will automatically be available in application.js.
+
+$('.wysihtml5').each(function(i, elem) {
+  $(elem).wysihtml5();
+});
+
+$(document).on('page:load', function(){
+  window['rangy'].initialized = false;
+});

app/assets/stylesheets/kebapage/application.css

@@ -8,6 +8,9 @@
  * You're free to add application-wide styles to this file and they'll appear at the top of the
  * compiled file, but it's generally better to create a new file per style scope.
  *
+ *= require bootstrap-wysihtml5
  *= require_self
  *= require_tree .
  */
+
+@import "bootstrap";

app/views/kebapage/static_pages/_form.html.haml

@@ -1,3 +1,5 @@
+=stylesheet_link_tag "kebapage/application"
+
 .panel.panel-default
   .panel-heading
     %i.icon-edit.icon-large
@@ -11,8 +13,10 @@
 
       .form-group
         = f.label I18n.t('kebapage.content'), class: 'control-label'
-        = f.text_area :content, class: 'form-control', placeholder: I18n.t('kebapage.content_placeholder'), rows: 4
+        = f.text_area :content, class: 'form-control wysihtml5', placeholder: I18n.t('kebapage.content_placeholder'), rows: 15
 
       .form-actions
         %button.btn.btn-default{type: 'submit'} #{I18n.t('kebapage.submit')}
-        %a.btn{href: static_pages_path} #{I18n.t('kebapage.cancel')}
+        %a.btn{href: static_pages_path} #{I18n.t('kebapage.cancel')}
+
+=javascript_include_tag "kebapage/application"

kebapage.gemspec

@@ -21,6 +21,8 @@ Gem::Specification.new do |s|
   s.add_dependency "i18n", "~> 0.6.9"
   s.add_dependency "haml-rails"
   s.add_dependency "friendly_id"
+  s.add_dependency "bootstrap-sass"
+  s.add_dependency "bootstrap-wysihtml5-rails"
 
   s.add_development_dependency "sqlite3"
 end

lib/kebapage.rb

@@ -1,5 +1,7 @@
 require "kebapage/engine"
 require "friendly_id"
+require "bootstrap-sass"
+require "bootstrap-wysihtml5-rails"
 
 module Kebapage
 end