前提是已經(jīng)實(shí)現(xiàn)了markdown功能點(diǎn)我
- 在
views中增加以下代碼命辖，用來實(shí)現(xiàn)預(yù)覽的模態(tài)對(duì)話框
<%= link_to "預(yù)覽", "#", class: "btn btn-primary", "data-toggle": "modal", " data-target": "#previewModal", id: "preview" %>
<!-- 模態(tài)框（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">關(guān)閉</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
- 在js中增加以下代碼胎撤，用來將js中獲得的數(shù)據(jù)post到服務(wù)器创坞，再返回經(jīng)過處理的數(shù)據(jù)平酿。在這里用到了
$.ajax的方法
$(document).on("page:change",function(){
$('#preview').click(function(){
title = $('#blog_title').val()
content = $('#blog_content').val()
$.ajax({
#這里使用post讯檐，可以發(fā)送很大的數(shù)據(jù)
type: "post",
url: "/preview",
data: {content:content},
dataType: "json",
success: function(data){
$('#preview_title').text(title)
$('#preview_content').html(data)
}
})
})
})
- 在routes和controller中增加新的路由和action，以便可以正確處理請(qǐng)求
#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
如果在預(yù)覽的時(shí)候染服，出現(xiàn)WEBrick::HTTPStatus::RequestURITooLarge錯(cuò)誤，說明ajax發(fā)送的消息太長了叨恨，webrick不支持柳刮，只需要用thin就可以了。（不過在jquery中用了post后痒钝，一般不會(huì)出這個(gè)問題）
gem "thin"bundle install-
thin start
如果想看development.log秉颗，可以 tail -f log/development.log
