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>
效果图:
保存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了,效果:
- 大小: 29.8 KB
- 大小: 63 KB
分享到:
相关推荐
富文本编辑器markitup压缩包,内附简单示例。
markitup 文本编辑器,一款完全用javascript编写的文本编辑器
标记Chrome扩展 基于 markItUp 的 GitHub 的 Markdown 编辑器 Chrome 扩展!
1.x, markItUp通用标记编辑器 1.x ! markItUp 通用标记编辑器 !markItUp 是在jQuery库上构建的JavaScript插件。 它允许你将任何textarea转换为标记编辑器。 Html,Textile,Wiki语法,Markdown,BBcode或者你自
jQuery Universal Markup Editor是一个基于jQuery的轻量级的文本编辑器,可实现非常强大的在线文本编辑器功能。可支持html、Wiki、BBScode等编辑格式,具体很强的扩展性,使用非常方便
源码学习,压缩包解压密码:www.cqlsoft.com
在线编辑内容的时候,那些基于 JavaScript 的编辑器帮了我们大忙,这些所见即所得(WYSIWYG)编辑器,给我们提供了类似 Office?的操作体验。如今,任何网站内容管理系统(CMS)和博客系统都需要一个这样的编辑器。...
是一个 jQuery 插件,允许将任何文本区域变成标记编辑器。 在当前的早期形式中, web_markitup正在目标 OpenERP textarea 中复制 anru 的功能:允许动态预览 ReSTtructured 文本(点击此链接查看)。 要求 适用于 ...
rex_markitup - Redaxo 插件 使用更现代/灵活的代码库完全重写之前...流体编辑器布局... ......整个事情都被修饰了一点...... 在模块中的应用 通过CSS类调用 <textarea class="rex-markitup"></textarea>
jQuery Universal Markup Editor是一个基于jQuery的轻量级的文本编辑器,可实现非常强大的在线文本编辑器功能。可支持html、Wiki、BBScode等编辑格式,具体很强的扩展性,使用非常方便
将缺少的菜单和选项添加到Taringa!中的帖子/主题编辑器中。 注意:该扩展名不是“完全”功能,建议您在高级视图中编辑帖子(或主题),并且绝不要简单。
CakePHP 的编辑/标记插件安装您可以使用将此插件安装到您的 CakePHP 应用程序中。 安装 Composer 软件包的推荐方法是: composer require your-name-here/Editorial/Markitup##加载安装插件后,您可以加载插件: ...
ijd8 是一款轻量的支持markdown 编写... 语言:python 框架:tornado 模板引擎:tenjin 数据库:mysql 编辑器:markitup for markdown 主题:Octopress 运行环境:SAE 或 BAE 代码高亮:pygments demo //www.ijd8.com/
ijd8 是一款轻量的支持markdown 编写的...语言:python框架:tornado模板引擎:tenjin数据库:mysql编辑器:markitup for markdown主题:Octopress运行环境:SAE 或 BAE代码高亮:pygmentsdemo http://www.ijd8.com/
我们将其放入 MarkitupAsset.php 并将“markitup”文件夹放入资产文件夹,将 Makitup.php 放入“widget”文件夹并更改 MarkitupAsset.php 文件中 $ sourcePath 中编辑器文件夹的路径 使用 使用发生\标记; field ($...
## ijd8 Octopress主题 ...语言:python框架:tornado模板引擎:tenjin数据库:mysql编辑器:markitup for markdown主题:Octopress运行环境:SAE 或 BAE代码高亮:pygmentsdemo http://www.ijd8.com/
源码学习,压缩包解压密码:www.cqlsoft.com
php $this->widget('ext.yiiext.widgets.markitup.EMarkitupWidget', array( // you can either use it for model attribute'model' => $my_model,'attribute' => 'my_field',// or just for input field 'name' => ...