新建博客的功能处理

app/assets/javascripts/admin/posts.js.coffee

@@ -4,27 +4,6 @@
 #
 
 $(document).ready ->
-  
-  preview = $('.preview')
-  content = $('#post_content')
-
-  $('#content').click ->
-    preview.hide()
-    content.show()
-    $(this).addClass('active')
-    $('#preview').removeClass('active')
-    false
-
-  $('#preview').click ->
-    content.hide()
-    $(this).addClass('active')
-    $('#content').removeClass('active')
-    preview.html('Loading...')
-    preview.show()
-    $.post $(this).attr('url'), text: content.val(), (data)->
-      preview.html(data)
-    false
-    
   $('a#upload_photo').click ->
     $('input[type=file]').show().focus().click().hide()
     false

app/assets/javascripts/angularjs.js.coffee

@@ -1,10 +1,11 @@
 #= require angular
 #= require angular-cookies
 #= require angular-resource
+#= require angular-sanitize
 #= require_self
 #= require_tree ./angularjs
 
-@app = angular.module('app', ['ngCookies'])
+@app = angular.module('app', ['ngCookies', 'ngSanitize'])
 
 @app.config(["$httpProvider", (provider) ->
     provider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')

app/assets/javascripts/angularjs/admin_posts.js.coffee

@@ -0,0 +1,13 @@
+@app.controller 'AdminPostsController', ($scope, $http, $location, $timeout, $cookies, $sce)->
+
+  $scope.body_active = true
+
+  $scope.changeToBody = ->
+    $scope.body_active = true
+
+  $scope.changeToPreview = ->
+    $scope.body_active = false
+    $scope.previewHTML = '加载中...'
+    $http.post '/admin/posts/preview', { content: $scope.content }
+    .success (res)->
+      $scope.previewHTML = res

app/assets/stylesheets/admin/posts.css.scss

@@ -1,9 +1,23 @@
 .admin-posts-field {
+  margin-top: 1rem;
+
+  .blog-title {
+    border-bottom: 1px solid #DDDDDD;
+    padding-bottom: 1rem;
+    margin-bottom: 2rem;
+  }
 
   #post_content {
     min-height: 20rem;
   }
 
+  .preview {
+    min-height: 20rem;
+    border: 1px solid #DDDDDD;
+    margin-bottom: 1.275rem;
+    padding: 0.275rem 0.5rem;
+  }
+
   #upload_photo {
     float: right;
     margin-top: 2rem;

app/controllers/admin/posts_controller.rb

@@ -30,10 +30,7 @@ class Admin::PostsController < ApplicationController
   end
 
   def preview
-    text = params.permit(:text)[:text] || ""
-    rd = Redcarpet::Render::HTML.new(:hard_wrap=>true)
-    md = Redcarpet::Markdown.new(rd, :autolink=>true)
-    render :text => md.render(text)
+    render :text => Post.render_html(params[:content] || "")
   end
   
   def post_params

app/models/post.rb

@@ -23,9 +23,13 @@ class Post
   validates :type, :presence=>true, :inclusion => { :in => [ TECH, LIFE, CREATOR ] }
 
   def content_html
+    self.render_html(self.content)
+  end
+
+  def self.render_html(content)
     rd = CodeHTML.new
     md = Redcarpet::Markdown.new(rd, autolink: true, fenced_code_blocks: true)
-    md.render(self.content)
+    md.render(content)
   end
 
   def visited

app/views/admin/posts/_form.html.slim

@@ -1,24 +1,28 @@
-.admin-posts-field
-  = simple_form_for(@post, :url=> admin_posts_path(@post)) do |f|
-    .row
-      .large-6.columns
-        = f.input :title, label: '标题'
-    .row
-      .small-6.large-3.columns
-        = f.input :type, :as=>:select, :collection=> [ Post::TECH, Post::LIFE, Post::CREATOR ], label: '类别'
-    .row
-      .small-12.large-6.columns
-        = f.simple_fields_for :label do |p|
-          = p.input :name, label: '标签'
-    dl.tabs data-tab=""
-      dd.active
-        a href="#" 正文
-      dd
-        a href="#" 预览
-      = link_to t(:upload_photo), "#", :id=>'upload_photo'
-    input[type="file" style="display: none;"]
-    = f.input :content, :as=> :text, :label=>false
-    .preview.wikistyle
-    .row
-      .small-12.large-6.columns.posts-button
-        = f.button :submit, '提交', class: 'button'
+= simple_form_for(@post, :url=> admin_posts_path(@post)) do |f|
+  .row
+    .large-6.columns
+      = f.input :title, label: '标题', "ng-model"=>"title"
+  .row
+    .small-6.large-3.columns
+      = f.input :type, :as=>:select, :collection=> [ Post::TECH, Post::LIFE, Post::CREATOR ], label: '类别', "ng-model"=>"type"
+  .row
+    .small-12.large-6.columns
+      = f.simple_fields_for :label do |p|
+        = p.input :name, label: '标签', "ng-model" => "labels"
+  / tabs and upload file field
+  dl.tabs
+    dd ng-class="{ active: body_active }"
+      a href="" ng-click="changeToBody()" 正文
+    dd ng-class="{ active: !body_active }"
+      a href="#" ng-click="changeToPreview()" 预览
+    = link_to t(:upload_photo), "#", :id=>'upload_photo'
+  input[type="file" style="display: none;"]
+
+  .content-field ng-show="body_active" ng-model= 'content'
+    = f.input :content, :as=> :text, :label => false, input_html: { "ng-model" => "content" }
+
+  .preview.markdown ng-hide="body_active" ng-bind-html=" previewHTML "
+
+  .row
+    .small-12.large-6.columns.posts-button
+      = f.button :submit, '提交', class: 'button'

app/views/admin/posts/new.html.slim

@@ -1,4 +1,5 @@
 .row
   .small-12.columns
-    h3 #{t('new_post')}
-    = render 'form'
+    .admin-posts-field ng-controller="AdminPostsController"
+      h3.blog-title #{t('new_post')}
+      = render 'form'

app/views/layouts/admin.html.slim

@@ -21,7 +21,8 @@ html
             = link_to '创建新博客', new_admin_post_path
           li
             a href="#" 管理博客
-    = yield
+    .admin-main-field ng-app="app"
+      = yield
     = render "layouts/footer"
 
 

spec/controllers/admin/posts_controller_spec.rb

@@ -4,13 +4,7 @@ describe Admin::PostsController do
   it "preview should return ok" do
     post :preview
     response.body.should == ""
-    post :preview, text: '123'
+    post :preview, content: '123'
     response.body.should == "<p>123</p>\n"
-    post :preview, text: <<-EOF
-```ruby
-puts 'hello world'
-```
-EOF
-    response.body.should == "<p><code>ruby<br>\nputs &#39;hello world&#39;<br>\n</code></p>\n"
   end
 end