markItUp+rdiscount搭建Rails下可视化Markdown编辑器
程序员文章站
2022-03-14 19:05:38
...
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:
效果图:
保存Markdown文本到数据库后如何转化成HTML格式展现在页面上?
安装rdiscount即可:
然后在show页面上:
注意:需要对用户恶意输入的<script>等标签做额外处理。比如仿照whitelist html tags做一个blacklist的helper方法:
然后就可以这样show content了:
实现preview功能:
1. 编辑set.js
2. 编辑routes.rb
3. 编辑controller
这样就能成功请求后台的rdiscount来parse markdown标签生成preview了,效果:
自行下载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>
效果图:
保存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(/</, "<") else node.to_s end else node.to_s.gsub(/</, "<") 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了,效果:
上一篇: 第 10 节 DataStream之source讲解(java)
下一篇: Flink 应用篇