美文网首页
markdowns格式预览功能

markdowns格式预览功能

作者: kamionayuki | 来源:发表于2015-09-27 03:18 被阅读68次

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

    1. 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>
    
    1. 在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)
        }
      })
    })
    })
    
    1. 在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格式预览功能

          本文链接:https://www.haomeiwen.com/subject/vajwcttx.html