markdowns格式预览功能

前提是已经实现了markdown功能点我

在views中增加以下代码，用来实现预览的模态对话框

<%= link_to "预览", "#", class: "btn btn-primary", "data-toggle": "modal", " data-target": "#previewModal", id: "preview"  %>
<!-- 模态框（Modal） -->
<div class="modal fade" id="previewModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
    <div class="modal-content">
       <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                ×
          </button>
          <h4 class="modal-title" id="preview_title">
             
          </h4>
       </div>
       <div class="modal-body" id="preview_content">
          
       </div>
       <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
       </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>

在js中增加以下代码，用来将js中获得的数据post到服务器，再返回经过处理的数据。在这里用到了$.ajax的方法

$(document).on("page:change",function(){
$('#preview').click(function(){
  title = $('#blog_title').val()
  content = $('#blog_content').val()
  $.ajax({
   #这里使用post，可以发送很大的数据
    type: "post",
    url:  "/preview",
    data: {content:content},
    dataType: "json",
    success: function(data){
      $('#preview_title').text(title)
      $('#preview_content').html(data)
    }
  })
})
})

在routes和controller中增加新的路由和action，以便可以正确处理请求

#routes
post'/preview' => "blogs/preview"
#controller
include ApplicationHelper
def preview
  respond_to do |format|
    format.json {render json: (markdown params[:content]).to_json}
  end
end

如果在预览的时候，出现WEBrick::HTTPStatus::RequestURITooLarge错误，说明ajax发送的消息太长了，webrick不支持，只需要用thin就可以了。（不过在jquery中用了post后，一般不会出这个问题）

gem "thin"
bundle install
thin start
如果想看development.log，可以
tail -f log/development.log

markdowns格式预览功能

推荐阅读更多精彩内容