欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

markItUp+rdiscount搭建Rails下可视化Markdown编辑器

程序员文章站 2022-03-14 19:02:14
...
markItUp是基于jQuery的可视化编辑器,支持Html,Textile,Wiki,Markdown,BBcode等多种标签。而且支持插件化替换各种标签和皮肤,UI效果很好。

自行下载jquery.js,然后从http://markitup.jaysalvat.com/downloads/下载jquery.markitup.js,Basic Markdown set和Simple and neutral skin。

在你的表单页面中加入相应的javascript和css文件,并用一段JavaScript初始化要用markItUp的Textarea:
<%=javascript_include_tag 'jquery' %>
<script type="text/javascript" src="/markitup/jquery.markitup.js"></script>
<script type="text/javascript" src="/markitup/sets/markdown/set.js"></script>
<link rel="stylesheet" type="text/css" href="/markitup/skins/simple/style.css" />
<link rel="stylesheet" type="text/css" href="/markitup/sets/markdown/style.css" />

<script language="javascript">
$(document).ready(function() {
    $('#textarea').markItUp(mySettings);
});
</script>


效果图:
markItUp+rdiscount搭建Rails下可视化Markdown编辑器
            
    
    博客分类: Ruby RailsjQueryJavaScriptHTMLCSS

保存Markdown文本到数据库后如何转化成HTML格式展现在页面上?
安装rdiscount即可:
gem install rdiscount

然后在show页面上:
<%= raw RDiscount.new(@question.content).to_html %>

注意:需要对用户恶意输入的<script>等标签做额外处理。比如仿照whitelist html tags做一个blacklist的helper方法:
  DISALLOWED_TAGS = %w(script iframe) unless defined?(DISALLOWED_TAGS)

  def blacklist(html)
    # only do this if absolutely necessary
    if html.index("<")
      tokenizer = HTML::Tokenizer.new(html)
      new_text = ""

      while token = tokenizer.next
        node = HTML::Node.parse(nil, 0, 0, token, false)
        new_text << case node
                    when HTML::Tag
                      if DISALLOWED_TAGS.include?(node.name)
                        node.to_s.gsub(/</, "&LT;")
                      else
                        node.to_s
                      end
                    else
                      node.to_s.gsub(/</, "&LT;")
                    end
      end

      html = new_text
    end
    html
  end

然后就可以这样show content了:
<%= raw blacklist RDiscount.new(@question.content).to_html %>


实现preview功能:
1. 编辑set.js
previewParserPath:	'/questions/preview',

2. 编辑routes.rb
match 'questions/preview' => 'questions#preview'

3. 编辑controller
def preview
  render :text => RDiscount.new(params[:data]).to_html
end

这样就能成功请求后台的rdiscount来parse markdown标签生成preview了,效果:
markItUp+rdiscount搭建Rails下可视化Markdown编辑器
            
    
    博客分类: Ruby RailsjQueryJavaScriptHTMLCSS
  • markItUp+rdiscount搭建Rails下可视化Markdown编辑器
            
    
    博客分类: Ruby RailsjQueryJavaScriptHTMLCSS
  • 大小: 29.8 KB
  • markItUp+rdiscount搭建Rails下可视化Markdown编辑器
            
    
    博客分类: Ruby RailsjQueryJavaScriptHTMLCSS
  • 大小: 63 KB