Rails Ruby China 发帖的这种编辑预览是怎么实现?

chengkai1853 · 2015年09月14日 · 最后由 chengkai1853 回复于 2015年09月15日 · 1876 次阅读

我把ruby-china的代码下载下来了,想看看markdown预览效果是怎么实现的。看了下源代码如下pages/_form.html.erb:

<%= simple_form_for @page do |f| %>
  <%= render "shared/error_messages", target: @page %>

  <%= f.input :slug, hint: "http://#{Setting.domain}/wiki/:slug"%>
  <%= f.input :title, input_html: { class: "xxlarge" } %>

  <div class="form-group">
    <div class="editor-toolbar col-sm-offset-2 col-sm-10">
      <ul class="nav nav-pills">
        <li class="edit active"><%= link_to(t("common.editor_toolbar_edit"), "#") %></li>
        <li class="preview"><%= link_to(t("common.editor_toolbar_preview"), "#") %></li>
      </ul>
    </div>
  </div>

  <%= f.input :body, as: :text, input_html: { rows: "30" },
        hint: "请使用 Markdown 格式编写,可以试试用 <a href='http://mouapp.com' target='_blank'>Mou</a> 这个 App 来编写。".html_safe %>
  <% if not @page.new_record? %>
    <%= f.input :change_desc, as: :text, input_html: { rows: "2" }, hint: t("pages.describe_this_time_change") %>
  <% end %>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <%= f.submit t("common.save"), class: "btn btn-primary", 'data-disable-with' => t("common.saving") %>
      <%= link_to t("common.cancel"), pages_path, class: "btn btn-default reset" %>
    </div>
  </div>
<% end %>

而pages.coffee 相应的coffee的代码是这样的:

window.PageView = Backbone.View.extend
  el: "body"
  events:
    "click .editor-toolbar .edit a": "toggleEditView"
    "click .editor-toolbar .preview a": "togglePreviewView"

  initialize: (opts) ->
    @parentView = opts.parentView
    $("<div id='preview' class='markdown form-control'></div>").insertAfter( $('#page_body') )

  toggleEditView: (e) ->
    $(e.target).parent().addClass('active')
    $('.preview a').parent().removeClass('active')
    $('#preview').hide()
    $('#page_body').show()
    false

  togglePreviewView: (e) ->
    $(e.target).parent().addClass('active')
    $('.edit a').parent().removeClass('active')
    $('#preview').html('Loading...')
    $('#page_body').hide()
    $('#preview').show()
    $.post '/wiki/preview', {body: $('#page_body').val()}, (data)->
      $('#preview').html(data)
      false
    false

问题是

<li class="edit active"><%= link_to(t("common.editor_toolbar_edit"), "#") %></li>
<li class="preview"><%= link_to(t("common.editor_toolbar_preview"), "#") %></li>

这个都是连接到 ‘#'本页,它是怎么实现逻辑的啊?参数传递什么的,都是怎么样实现的呢? 那个js 的

el: "body"
  events:
    "click .editor-toolbar .edit a": "toggleEditView"
    "click .editor-toolbar .preview a": "togglePreviewView"

是什么意思啊? 具体实现逻辑是怎么样的呢?求分解下这个js代码。如果有更简单的方法显示,也求方法。先谢谢了啊。

共收到 5 条回复
$.post '/wiki/preview', {body: $('#page_body').val()}, (data)->
  $('#preview').html(data)
  false
``

链接地址 # 是用来忽略的。

就是把页面上用户输入的文本内容,通过ajax请求发送到服务器,服务器上通过markdownconverter这种东东,记得是redcarpet这个gem,转化成html,然后preview节点显示出转化后的html。

ruby-china实现的这个markdown编辑效果,可以抽离出来到自己的博客系统或其它地方什么的

#2楼 @rei 谢谢,刚刚google中,发现是我jquery只看了基础的知识的原因,所以看不懂,要恶补jquery去了

#2楼 @rei 请问一下,里面的page_body是什么啊? 而且在post的时候会用{body: $('#page_body').val()}这个值。关键是页面上好像都没有( $('#page_body') )这个id的元素。另外附上它出现的地方

app/assets/javascripts/pages.coffee
13:    $("<div id='preview' class='markdown form-control'></div>").insertAfter( $('#page_body') )
19:    $('#page_body').show()
26:    $('#page_body').hide()
28:    $.post '/wiki/preview', {body: $('#page_body').val()}, (data)->
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册