adds wysiwyg to debate description

Gemfile

@@ -36,6 +36,7 @@ gem "responders"
 gem 'foundation-rails'
 gem 'acts_as_votable'
 gem "recaptcha", :require => "recaptcha/rails"
+gem 'ckeditor'
 
 group :development, :test do
   # Call 'byebug' anywhere in the code to stop execution and get a debugger console

Gemfile.lock

@@ -59,7 +59,14 @@ GEM
       rack (>= 1.0.0)
       rack-test (>= 0.5.4)
       xpath (~> 2.0)
+    ckeditor (4.1.2)
+      cocaine
+      orm_adapter (~> 0.5.0)
+    climate_control (0.0.3)
+      activesupport (>= 3.0)
     cliver (0.3.2)
+    cocaine (0.5.7)
+      climate_control (>= 0.0.3, < 1.0)
     coffee-rails (4.1.0)
       coffee-script (>= 2.2.0)
       railties (>= 4.0.0, < 5.0)
@@ -216,6 +223,7 @@ DEPENDENCIES
   acts_as_votable
   byebug
   capybara
+  ckeditor
   coffee-rails (~> 4.1.0)
   database_cleaner
   devise
@@ -236,3 +244,6 @@ DEPENDENCIES
   turbolinks
   uglifier (>= 1.3.0)
   web-console (~> 2.0)
+
+BUNDLED WITH
+   1.10.5

app/assets/javascripts/application.js

@@ -14,6 +14,7 @@
 //= require jquery_ujs
 //= require foundation
 //= require turbolinks
+//= require ckeditor/init
 //= require_tree .
 
 $(function(){ $(document).foundation(); });

app/assets/javascripts/ckeditor/config.js

@@ -0,0 +1,117 @@
+/*
+Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.html or http://ckeditor.com/license
+*/
+
+CKEDITOR.editorConfig = function( config )
+{
+  // Define changes to default configuration here. For example:
+  // config.language = 'fr';
+  // config.uiColor = '#AADC6E';
+
+  /* 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";
+
+  config.allowedContent = true;
+
+  // 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']);
+      }
+    }
+  });
+
+  // Toolbar groups configuration.
+  config.toolbar = [
+    { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source'] },
+    { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
+    // { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
+    // { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
+    { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
+    { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar' ] },
+    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
+    '/',
+    { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
+    { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
+    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] }
+  ];
+
+  config.toolbar_mini = [
+    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
+    { name: 'styles', items: [ 'Font', 'FontSize' ] },
+    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat' ] },
+    { name: 'insert', items: [ 'Table', 'HorizontalRule', 'SpecialChar' ] }
+  ];
+  config.toolbar = "mini";
+};

app/views/debates/_debate.html.erb

@@ -5,7 +5,7 @@
 
         <h3><%= link_to debate.title, debate %></h3>
         <p>Por <%= debate.author.name %> el <%= l debate.created_at.to_date %></p>
-        <p><%= debate.description %></p>
+        <p><%= sanitize(debate.description.html_safe) %></p>
 
         <p><%= render 'shared/tags', debate: debate %></p>
 

app/views/debates/_form.html.erb

@@ -18,8 +18,7 @@
   <br/>
   <p><strong><%= t("debates.form.debate_text") %></strong></p>
   <p><%= t("debates.form.text_instructions") %></p>
-  <%= f.text_area  :description %>
+  <%= f.cktext_area :description, ckeditor: { language: I18n.locale } %>
-
   <div>
     <%= f.label :tag_list, t("debates.form.tags_label") %><br />
     <%= f.text_field :tag_list, value: @debate.tag_list.to_s %>

app/views/debates/show.html.erb

@@ -6,7 +6,7 @@
         <div id="debate-<%= @debate.id %>" class="small-12 medium-9 column">
             <h1><%= @debate.title %></h1>
             <p>Por <%= @debate.author.name %> el <%= l @debate.created_at.to_date %></p>
-            <p><%= @debate.description %></p>
+            <p><%= sanitize(@debate.description.html_safe) %></p>
             <p><%= render 'shared/tags', debate: @debate %></p>
         </div>