美文网首页
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格式预览功能

    前提是已经实现了markdown功能点我 在views中增加以下代码,用来实现预览的模态对话框 在js中增加以下代...

  • markdowns

    #一级标题 ##二级标题 ###三级标题 ####四级标题 ^code代码框^ ***分割线 >引用 *无序列表 ...

  • web前端 - 简单易学的markdown基础语法

    (预览工具:ctrl+shift+p 选择打开侧边预览) 一. 标题标签 格式: 效果: 二. 粗体标签 格式: ...

  • 预览功能

    一、github预览 新建一个仓库,新建html文件,点击上面的Settings。 二、coding预览 1.登录...

  • Input file 图片预览

    图片预览功能

  • Mac 成吨终端效率的技巧

    增强各种预览的插件 预览查看图片分辨率&大小 代码语法高亮 快速预览zip压缩包内容 快速预览markdown格式...

  • Mac 终端效率神技

    增强各种预览的插件 预览查看图片分辨率&大小 代码语法高亮 快速预览zip压缩包内容 快速预览markdown格式...

  • 文档在线预览的无限可能,Adobe全家桶也可以

    我发现| Adobe全家桶格式的文件可以在线预览,比如常见的.psd/.ai格式文件 在线预览刚开始跟我这个内容运...

  • JNI——RTMP推流

    视频: android相机的预览画面格式是NV21,直播播放的格式是YUV,所以首先要把相机预览的画面转成YUV然...

  • element的上传

    项目需求: 上传各种文件,图片,office类型的文件 (图片具有预览功能) 本来office文件也需要预览功能,...

网友评论

      本文标题:markdowns格式预览功能

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