[url=http://markitup.jaysalvat.com/home/]markItUp[/url]是基于jQuery的可视化编辑器,支持Html,Textile,Wiki,Markdown,BBcode等多种标签。而且支持插件化替换各种标签和皮肤,UI效果很好。
自行下载jquery.js,然后从[url]http://markitup.jaysalvat.com/downloads/[/url]下载jquery.markitup.js,Basic Markdown set和Simple and neutral skin。
在你的表单页面中加入相应的javascript和css文件,并用一段JavaScript初始化要用markItUp的Textarea:
[code]
<%=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>
[/code]
效果图:
[img]http://dl.iteye.com/upload/attachment/371770/1ad465ef-7e07-3846-b4ef-6c5217a25d07.png[/img]
保存Markdown文本到数据库后如何转化成HTML格式展现在页面上?
安装[url=https://github.com/rtomayko/rdiscount]rdiscount[/url]即可:
[code]
gem install rdiscount
[/code]
然后在show页面上:
[code]
<%= raw RDiscount.new(@question.content).to_html %>
[/code]
注意:需要对用户恶意输入的<script>等标签做额外处理。比如仿照[url=http://hideto.iteye.com/blog/82583]whitelist html tags[/url]做一个blacklist的helper方法:
[code]
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
[/code]
然后就可以这样show content了:
[code]
<%= raw blacklist RDiscount.new(@question.content).to_html %>
[/code]
实现preview功能:
1. 编辑set.js
[code]
previewParserPath: '/questions/preview',
[/code]
2. 编辑routes.rb
[code]
match 'questions/preview' => 'questions#preview'
[/code]
3. 编辑controller
[code]
def preview
render :text => RDiscount.new(params[:data]).to_html
end
[/code]
这样就能成功请求后台的rdiscount来parse markdown标签生成preview了,效果:
[img]http://dl.iteye.com/upload/attachment/371772/a4e7f4b4-88cc-3362-b7af-c42d6289092a.png[/img]
自行下载jquery.js,然后从[url]http://markitup.jaysalvat.com/downloads/[/url]下载jquery.markitup.js,Basic Markdown set和Simple and neutral skin。
在你的表单页面中加入相应的javascript和css文件,并用一段JavaScript初始化要用markItUp的Textarea:
[code]
<%=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>
[/code]
效果图:
[img]http://dl.iteye.com/upload/attachment/371770/1ad465ef-7e07-3846-b4ef-6c5217a25d07.png[/img]
保存Markdown文本到数据库后如何转化成HTML格式展现在页面上?
安装[url=https://github.com/rtomayko/rdiscount]rdiscount[/url]即可:
[code]
gem install rdiscount
[/code]
然后在show页面上:
[code]
<%= raw RDiscount.new(@question.content).to_html %>
[/code]
注意:需要对用户恶意输入的<script>等标签做额外处理。比如仿照[url=http://hideto.iteye.com/blog/82583]whitelist html tags[/url]做一个blacklist的helper方法:
[code]
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
[/code]
然后就可以这样show content了:
[code]
<%= raw blacklist RDiscount.new(@question.content).to_html %>
[/code]
实现preview功能:
1. 编辑set.js
[code]
previewParserPath: '/questions/preview',
[/code]
2. 编辑routes.rb
[code]
match 'questions/preview' => 'questions#preview'
[/code]
3. 编辑controller
[code]
def preview
render :text => RDiscount.new(params[:data]).to_html
end
[/code]
这样就能成功请求后台的rdiscount来parse markdown标签生成preview了,效果:
[img]http://dl.iteye.com/upload/attachment/371772/a4e7f4b4-88cc-3362-b7af-c42d6289092a.png[/img]