Implement "Use WYSIWYG" toggle functionality for Posts, to allow for …

…raw HTML editing.
cortex-cms · Jul 13, 2015 · 5475068 · 5475068
1 parent 4b51e7e
commit 5475068
Show file tree

Hide file tree

Showing 11 changed files with 138 additions and 68 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -4,5 +4,6 @@ root = true
 indent_style = space
 indent_size = 2
 end_of_line = lf
+insert_final_newline = true
 charset = utf-8
 trim_trailing_whitespace = true
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -701,3 +701,6 @@ DEPENDENCIES
   uglifier (~> 2.7.1)
   underscore-rails (~> 1.8.2)
   unicorn-rails (~> 2.2.0)
+
+BUNDLED WITH
+   1.10.3
diff --git a/app/api/v1/entities/post.rb b/app/api/v1/entities/post.rb
@@ -6,6 +6,7 @@ class Post < Grape::Entity
         expose :title, documentation:  {desc: "Post Title", type: "String" , required: true}
         expose :type, documentation: {desc: "Post Type", type: "String", enum: ["ArticlePost", "VideoPost", "InfographicPost", "PromoPost"], required: true}
         expose :draft, documentation: {desc: "Draft status", type: "Boolean"}
+        expose :is_wysiwyg, documentation: {desc: "Post needs a WYSIWYG editor", type: "Boolean"}
         expose :comment_count, documentation: {desc: "Number of comments", type: "Integer"}
         expose :short_description, documentation: {desc: "Short description of the post", type: "String", required: true}
         expose :job_phase, documentation: {desc: "Job Phase", type: "String", enum: ["discovery", "find_the_job", "get_the_job", "on_the_job"], required: true}

diff --git a/app/assets/javascripts/controllers/posts/edit.js b/app/assets/javascripts/controllers/posts/edit.js
@@ -59,7 +59,8 @@ angular.module('cortex.controllers.posts.edit', [
     plugins: ['media', 'imageFit'],
     minHeight: 800,
     buttonSource: true,
-    deniedTags: ['html', 'head', 'link', 'body', 'meta', 'applet'] // Allow script, style
+    deniedTags: [],
+    replaceDivs: false
   };
 
   $scope.isAuthorUser = function(post) {

diff --git a/app/assets/javascripts/states.js b/app/assets/javascripts/states.js
@@ -268,6 +268,7 @@ angular.module('cortex.states', [
           var post = new cortex.posts();
           post.body = '';
           post.draft = true;
+          post.is_wysiwyg = true;
           post.author = currentUser.full_name;
           post.copyright_owner = post.copyright_owner || "CareerBuilder, LLC";
           post.tag_list = '';

diff --git a/app/assets/stylesheets/states/posts.edit.info.scss b/app/assets/stylesheets/states/posts.edit.info.scss
@@ -0,0 +1,7 @@
+.is-wysiwyg {
+  @extend .form-group;
+
+  .is-wysiwyg-group {
+    @extend .input-group;
+  }
+}
diff --git a/app/assets/stylesheets/states/posts.edit.scss b/app/assets/stylesheets/states/posts.edit.scss
@@ -9,6 +9,8 @@
 
       .editor {
         @extend .form-control;
+
+        min-height: 800px;
       }
     }
   }
@@ -134,4 +136,4 @@ span.has-error i::before {
 .form-control-feedback.select-feedback {
    pointer-events: none;
    right: 15px;
- }
+ }
diff --git a/app/assets/templates/posts/article/info.html b/app/assets/templates/posts/article/info.html
@@ -78,3 +78,21 @@
            required>
   </div>
 </div>
+
+<div class="is-wysiwyg">
+  <label>Use WYSIWYG Editor?</label>
+  <div class="is-wysiwyg-group">
+    <input
+        bs-switch
+        ng-model="data.post.is_wysiwyg"
+        type="checkbox"
+        switch-active="true"
+        switch-on-text="Enabled"
+        switch-off-text="Disabled"
+        switch-on-color="default"
+        switch-off-color="primary"
+        switch-icon="fa fa-edit"
+        switch-animate="true"/>
+  </div>
+  <p>Consider disabling the WYSIWYG editor if you'd like to input raw HTML</p>
+</div>
diff --git a/app/assets/templates/posts/article/seo.html b/app/assets/templates/posts/article/seo.html
@@ -24,4 +24,22 @@
            ng-model="data.post.seo_description"
            ng-maxlength="255">
   </div>
-</div>
+</div>
+
+<div class="is-wysiwyg">
+  <label>Use WYSIWYG Editor?</label>
+  <div class="is-wysiwyg-group">
+    <input
+        bs-switch
+        ng-model="data.post.is_wysiwyg"
+        type="checkbox"
+        switch-active="true"
+        switch-on-text="Enabled"
+        switch-off-text="Disabled"
+        switch-on-color="default"
+        switch-off-color="primary"
+        switch-icon="fa fa-edit"
+        switch-animate="true"/>
+  </div>
+  <p>Consider disabling the WYSIWYG editor if you'd like to input raw HTML</p>
+</div>
diff --git a/app/assets/templates/posts/edit.html b/app/assets/templates/posts/edit.html
@@ -1,10 +1,17 @@
 <form id="postForm" name="postForm" ng-submit="data.savePost()" novalidate>
   <div class="composer-column">
     <div class="composer">
-      <textarea ng-model="data.post.body"
-                redactor="redactorOptions"
-                class="editor">
-      </textarea>
+      <div ng-switch on="data.post.is_wysiwyg">
+        <div ng-switch-when="true">
+          <textarea ng-model="data.post.body"
+                    redactor="redactorOptions"
+                    class="editor">
+          </textarea>
+        </div>
+        <div ng-switch-default>
+          <textarea ng-model="data.post.body" class="editor"></textarea>
+        </div>
+      </div>
     </div>
   </div>