验证码

app/assets/images/captcha/iepngfix.htc

+<public:component>
+<public:attach event="onpropertychange" onevent="iePNGFix(0)" />
+
+<script type="text/javascript">
+
+// IE5.5+ PNG Alpha Fix v1.0
+// (c) 2004-2008 Angus Turnbull http://www.twinhelix.com
+
+// This is licensed under the GNU LGPL, version 2.1 or later.
+// For details, see: http://creativecommons.org/licenses/LGPL/2.1/
+
+
+// This must be a path to a blank image, relative to the HTML document(s).
+// In production use I suggest '/images/blank.gif' or similar. That's all!
+if (typeof blankImg == 'undefined') var blankImg = 'captcha/imgs/blank.gif';
+
+
+
+function filt(s, b)
+{
+ var f = 'DXImageTransform.Microsoft.AlphaImageLoader';
+ var sM = (currentStyle.backgroundRepeat == 'no-repeat') ? 'crop' : 'scale';
+ s = (s || '').replace(/\(/g, '%28').replace(/\)/g, '%29');
+
+ if (s && !(/IMG|INPUT/.test(nodeName) && !b) &&
+  currentStyle.width == 'auto' && currentStyle.height == 'auto')
+ {
+  style.width = offsetWidth + 'px';
+  style.height = clientHeight + 'px';
+  if (currentStyle.display == 'inline') style.display = 'inline-block';
+ }
+
+ if (filters[f])
+ {
+  filters[f].enabled = s ? true : false;
+  if (s) with (filters[f]) { src = s }
+ }
+ else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="' + sM + '")';
+}
+
+function iePNGFix(init)
+{
+ if (!/MSIE (5\.5|6)/.test(navigator.userAgent) || typeof filters == 'unknown') return;
+ var evt = init ? { propertyName: 'src,background' } : event;
+ var isSrc = /src/.test(evt.propertyName);
+ var isBg = /background/.test(evt.propertyName);
+ var isClass = !init &&
+  ((this.className != this._png_class) && (this.className || this._png_class));
+ if (!(isSrc || isBg || isClass)) return;
+ this._png_class = this.className;
+ var blank = blankImg.match(/([^\/]+)$/)[1];
+
+ // Required for Whatever:hover support - erase any set BG if className changes.
+ if (isClass && ((style.backgroundImage.indexOf('url(') == -1) ||
+     (style.backgroundImage.indexOf(blank) > -1)))
+ {
+  setTimeout(function() { this.style.backgroundImage = '' }, 0);
+  return;
+ }
+
+ if (isSrc && this.src && /IMG|INPUT/.test(nodeName))
+ {
+  if ((/\.png/i).test(src))
+  {
+   filt(src, 1);
+   src = blankImg;
+  }
+  else if (src.indexOf(blank) == -1) filt();
+ }
+
+ var bgSrc = currentStyle.backgroundImage || style.backgroundImage;
+ if ((bgSrc + this.src).indexOf(blank) == -1)
+ {
+  var bgPNG = bgSrc.match(/^url[("']+(.*\.png[^\)"']*)[\)"']+[^\)]*$/i);
+
+  if (bgPNG)
+  {
+   style.backgroundImage = 'url("' + blankImg + '")';
+   filt(bgPNG[1], 0);
+   // Unclickable elements inside PNG backgrounds.
+   var tags = ['a', 'input', 'select', 'textarea', 'iframe', 'object'],
+    t = tags.length, tFix = [];
+   while (t--)
+   {
+    var elms = all.tags(tags[t]), e = elms.length;
+    while (e--) tFix.push(elms[e]);
+   }
+   var t = tFix.length;
+   if (t && (/relative|absolute/i).test(currentStyle.position))
+    alert('IEPNGFix: Children of positioned element are unclickable:\n\n<' +
+     nodeName + (id && ' id=' + id) + '>');
+    while (t--)
+     if (!(/relative|absolute/i).test(tFix[t].currentStyle.position))
+      tFix[t].style.position = 'relative';
+  }
+  else filt();
+ }
+}
+
+iePNGFix(1);
+
+</script>
+</public:component>

app/assets/images/markitup/sets/bbcode/readme.txt

+Markup language: 
+BBCode
+
+Description:
+A basic BBCode markup set with Bold, Italic, Underline, Picture, Link, Size, List, Quotes, Code, Clean button, Preview button.
+
+Install:
+- Download the zip file
+- Unzip it in your markItUp! sets folder
+- Modify your JS link to point at this set.js
+- Modify your CSS link to point at this style.css
\ No newline at end of file

app/assets/images/markitup/sets/bbcode/set.js

+// ----------------------------------------------------------------------------
+// markItUp!
+// ----------------------------------------------------------------------------
+// Copyright (C) 2008 Jay Salvat
+// http://markitup.jaysalvat.com/
+// ----------------------------------------------------------------------------
+// BBCode tags example
+// http://en.wikipedia.org/wiki/Bbcode
+// ----------------------------------------------------------------------------
+// Feel free to add more tags
+// ----------------------------------------------------------------------------
+mySettings = {
+	previewParserPath:	'', // path to your BBCode parser
+	markupSet: [
+		{name:'Bold', key:'B', openWith:'[b]', closeWith:'[/b]'},
+		{name:'Italic', key:'I', openWith:'[i]', closeWith:'[/i]'},
+		{name:'Underline', key:'U', openWith:'[u]', closeWith:'[/u]'},
+		{separator:'---------------' },
+		{name:'Picture', key:'P', replaceWith:'[img][![Url]!][/img]'},
+		{name:'Link', key:'L', openWith:'[url=[![Url]!]]', closeWith:'[/url]', placeHolder:'Your text to link here...'},
+		{separator:'---------------' },
+		{name:'Size', key:'S', openWith:'[size=[![Text size]!]]', closeWith:'[/size]',
+		dropMenu :[
+			{name:'Big', openWith:'[size=200]', closeWith:'[/size]' },
+			{name:'Normal', openWith:'[size=100]', closeWith:'[/size]' },
+			{name:'Small', openWith:'[size=50]', closeWith:'[/size]' }
+		]},
+		{separator:'---------------' },
+		{name:'Bulleted list', openWith:'[list]\n', closeWith:'\n[/list]'},
+		{name:'Numeric list', openWith:'[list=[![Starting number]!]]\n', closeWith:'\n[/list]'}, 
+		{name:'List item', openWith:'[*] '},
+		{separator:'---------------' },
+		{name:'Quotes', openWith:'[quote]', closeWith:'[/quote]'},
+		{name:'Code', openWith:'[code]', closeWith:'[/code]'}, 
+		{separator:'---------------' },
+		{name:'Clean', className:"clean", replaceWith:function(markitup) { return markitup.selection.replace(/\[(.*?)\]/g, "") } },
+		{name:'Preview', className:"preview", call:'preview' }
+	]
+}
\ No newline at end of file

app/assets/images/markitup/sets/bbcode/style.css

+/* -------------------------------------------------------------------
+// markItUp!
+// By Jay Salvat - http://markitup.jaysalvat.com/
+// ------------------------------------------------------------------*/
+.markItUp .markItUpButton1 a	{
+	background-image:url(images/bold.png);
+}
+.markItUp .markItUpButton2 a	{
+	background-image:url(images/italic.png);
+}
+.markItUp .markItUpButton3 a	{
+	background-image:url(images/underline.png);
+}
+
+.markItUp .markItUpButton4 a	{
+	background-image:url(images/picture.png);
+}
+.markItUp .markItUpButton5 a	{
+	background-image:url(images/link.png);
+}
+
+.markItUp .markItUpButton6 a	{
+	background-image:url(images/fonts.png);
+}
+.markItUp .markItUpButton7 a	{
+	background-image:url(images/list-bullet.png);
+}
+.markItUp .markItUpButton8 a	{
+	background-image:url(images/list-numeric.png);
+}
+.markItUp .markItUpButton9 a	{
+	background-image:url(images/list-item.png);
+}
+
+.markItUp .markItUpButton10 a	{
+	background-image:url(images/quotes.png);
+}
+.markItUp .markItUpButton11 a	{
+	background-image:url(images/code.png);
+}
+	
+.markItUp .clean a {
+	background-image:url(images/clean.png);
+}
+.markItUp .preview a {
+	background-image:url(images/preview.png);
+}
\ No newline at end of file

app/assets/images/markitup/sets/default/set.js

+// ----------------------------------------------------------------------------
+// markItUp!
+// ----------------------------------------------------------------------------
+// Copyright (C) 2011 Jay Salvat
+// http://markitup.jaysalvat.com/
+// ----------------------------------------------------------------------------
+// Html tags
+// http://en.wikipedia.org/wiki/html
+// ----------------------------------------------------------------------------
+// Basic set. Feel free to add more tags
+// ----------------------------------------------------------------------------
+var mySettings = {
+	onShiftEnter:  	{keepDefault:false, replaceWith:'<br />\n'},
+	onCtrlEnter:  	{keepDefault:false, openWith:'\n<p>', closeWith:'</p>'},
+	onTab:    		{keepDefault:false, replaceWith:'    '},
+	markupSet:  [ 	
+		{name:'Bold', key:'B', openWith:'(!(<strong>|!|<b>)!)', closeWith:'(!(</strong>|!|</b>)!)' },
+		{name:'Italic', key:'I', openWith:'(!(<em>|!|<i>)!)', closeWith:'(!(</em>|!|</i>)!)'  },
+		{name:'Stroke through', key:'S', openWith:'<del>', closeWith:'</del>' },
+		{separator:'---------------' },
+		{name:'Bulleted List', openWith:'    <li>', closeWith:'</li>', multiline:true, openBlockWith:'<ul>\n', closeBlockWith:'\n</ul>'},
+		{name:'Numeric List', openWith:'    <li>', closeWith:'</li>', multiline:true, openBlockWith:'<ol>\n', closeBlockWith:'\n</ol>'},
+		{separator:'---------------' },
+		{name:'Picture', key:'P', replaceWith:'<img src="[![Source:!:http://]!]" alt="[![Alternative text]!]" />' },
+		{name:'Link', key:'L', openWith:'<a href="[![Link:!:http://]!]"(!( title="[![Title]!]")!)>', closeWith:'</a>', placeHolder:'Your text to link...' },
+		{separator:'---------------' },
+		{name:'Clean', className:'clean', replaceWith:function(markitup) { return markitup.selection.replace(/<(.*?)>/g, "") } },		
+		{name:'Preview', className:'preview',  call:'preview'}
+	]
+}

app/assets/images/markitup/sets/default/style.css

+/* -------------------------------------------------------------------
+// markItUp!
+// By Jay Salvat - http://markitup.jaysalvat.com/
+// ------------------------------------------------------------------*/
+.markItUp .markItUpButton1 a {
+	background-image:url(images/bold.png);
+}
+.markItUp .markItUpButton2 a {
+	background-image:url(images/italic.png);
+}
+.markItUp .markItUpButton3 a {
+	background-image:url(images/stroke.png);
+}
+
+.markItUp .markItUpButton4 a {
+	background-image:url(images/list-bullet.png); 
+}
+.markItUp .markItUpButton5 a {
+	background-image:url(images/list-numeric.png);
+}
+
+.markItUp .markItUpButton6 a {
+	background-image:url(images/picture.png); 
+}
+.markItUp .markItUpButton7 a {
+	background-image:url(images/link.png);
+}
+
+.markItUp .markItUpButton8 a {
+	background-image:url(images/clean.png);
+}
+.markItUp .preview a {
+	background-image:url(images/preview.png);
+}

app/assets/images/markitup/skins/markitup/style.css

+/* -------------------------------------------------------------------
+// markItUp! Universal MarkUp Engine, JQuery plugin
+// By Jay Salvat - http://markitup.jaysalvat.com/
+// ------------------------------------------------------------------*/
+.markItUp * {
+	margin:0px; padding:0px;
+	outline:none;
+}
+.markItUp a:link,
+.markItUp a:visited {
+	color:#000;
+	text-decoration:none;
+}
+.markItUp  {
+	width:700px;
+	margin:5px 0 5px 0;
+	border:5px solid #F5F5F5;	
+}
+.markItUpContainer  {
+	border:1px solid #3C769D;	
+	background:#FFF url(images/bg-container.png) repeat-x top left;
+	padding:5px 5px 2px 5px;
+	font:11px Verdana, Arial, Helvetica, sans-serif;
+}
+.markItUpEditor {
+	font:12px 'Courier New', Courier, monospace;
+	padding:5px 5px 5px 35px;
+	border:3px solid #3C769D;
+	width:643px;
+	height:320px;
+	background:#FFF url(images/bg-editor.png) no-repeat;
+	clear:both;
+	line-height:18px;
+	overflow:auto;
+}
+.markItUpPreviewFrame	{
+	overflow:auto;
+	background-color:#FFFFFF;
+	border:1px solid #3C769D;
+	width:99.9%;
+	height:300px;
+	margin:5px 0;
+}
+.markItUpFooter {
+	width:100%;
+	cursor:n-resize;
+}
+.markItUpResizeHandle {
+	overflow:hidden;
+	width:22px; height:5px;
+	margin-left:auto;
+	margin-right:auto;
+	background-image:url(images/handle.png);
+	cursor:n-resize;
+}
+/***************************************************************************************/
+/* first row of buttons */
+.markItUpHeader ul li	{
+	list-style:none;
+	float:left;
+	position:relative;
+}
+.markItUpHeader ul li ul{
+	display:none;
+}
+.markItUpHeader ul li:hover > ul{
+	display:block;
+}
+.markItUpHeader ul .markItUpDropMenu {
+	background:transparent url(images/menu.png) no-repeat 115% 50%;
+	margin-right:5px;
+}
+.markItUpHeader ul .markItUpDropMenu li {
+	margin-right:0px;
+}
+.markItUpHeader ul .markItUpSeparator {
+	margin:0 10px;
+	width:1px;
+	height:16px;
+	overflow:hidden;
+	background-color:#CCC;
+}
+.markItUpHeader ul ul .markItUpSeparator {
+	width:auto; height:1px;
+	margin:0px;
+}
+/* next rows of buttons */
+.markItUpHeader ul ul {
+	display:none;
+	position:absolute;
+	top:18px; left:0px;	
+	background:#F5F5F5;
+	border:1px solid #3C769D;
+	height:inherit;
+}
+.markItUpHeader ul ul li {
+	float:none;
+	border-bottom:1px solid #3C769D;
+}
+.markItUpHeader ul ul .markItUpDropMenu {
+	background:#F5F5F5 url(images/submenu.png) no-repeat 100% 50%;
+}
+/* next rows of buttons */
+.markItUpHeader ul ul ul {
+	position:absolute;
+	top:-1px; left:150px;
+}
+.markItUpHeader ul ul ul li {
+	float:none;
+}
+.markItUpHeader ul a {
+	display:block;
+	width:16px; height:16px;
+	text-indent:-10000px;
+	background-repeat:no-repeat;
+	padding:3px;
+	margin:0px;
+}
+.markItUpHeader ul ul a {
+	display:block;
+	padding-left:0px;
+	text-indent:0;
+	width:120px; 
+	padding:5px 5px 5px 25px;
+	background-position:2px 50%;
+}
+.markItUpHeader ul ul a:hover  {
+	color:#FFF;
+	background-color:#3C769D;
+}
+/***************************************************************************************/
+.html .markItUpEditor {
+	background-image:url(images/bg-editor-html.png);
+}
+.markdown .markItUpEditor {
+	background-image:url(images/bg-editor-markdown.png);
+}
+.textile .markItUpEditor {
+	background-image:url(images/bg-editor-textile.png);
+}
+.bbcode .markItUpEditor {
+	background-image:url(images/bg-editor-bbcode.png);
+}
+.wiki .markItUpEditor,
+.dotclear .markItUpEditor {
+	background-image:url(images/bg-editor-wiki.png);
+}
\ No newline at end of file

app/assets/images/markitup/skins/simple/style.css

+/* -------------------------------------------------------------------
+// markItUp! Universal MarkUp Engine, JQuery plugin
+// By Jay Salvat - http://markitup.jaysalvat.com/
+// ------------------------------------------------------------------*/
+.markItUp * {
+	margin:0px; padding:0px;
+	outline:none;
+}
+.markItUp a:link,
+.markItUp a:visited {
+	color:#000;
+	text-decoration:none;
+}
+.markItUp  {
+	width:700px;
+	margin:5px 0 5px 0;
+}
+.markItUpContainer  {
+	font:11px Verdana, Arial, Helvetica, sans-serif;
+}
+.markItUpEditor {
+	font:12px 'Courier New', Courier, monospace;
+	padding:5px;
+	width:690px;
+	height:320px;
+	clear:both;
+	line-height:18px;
+	overflow:auto;
+}
+.markItUpPreviewFrame	{
+	overflow:auto;
+	background-color:#FFF;
+	width:99.9%;
+	height:300px;
+	margin:5px 0;
+}
+.markItUpFooter {
+	width:100%;
+}
+.markItUpResizeHandle {
+	overflow:hidden;
+	width:22px; height:5px;
+	margin-left:auto;
+	margin-right:auto;
+	background-image:url(images/handle.png);
+	cursor:n-resize;
+}
+/***************************************************************************************/
+/* first row of buttons */
+.markItUpHeader ul li	{
+	list-style:none;
+	float:left;
+	position:relative;
+}
+.markItUpHeader ul li:hover > ul{
+	display:block;
+}
+.markItUpHeader ul .markItUpDropMenu {
+	background:transparent url(images/menu.png) no-repeat 115% 50%;
+	margin-right:5px;
+}
+.markItUpHeader ul .markItUpDropMenu li {
+	margin-right:0px;
+}
+/* next rows of buttons */
+.markItUpHeader ul ul {
+	display:none;
+	position:absolute;
+	top:18px; left:0px;	
+	background:#FFF;
+	border:1px solid #000;
+}
+.markItUpHeader ul ul li {
+	float:none;
+	border-bottom:1px solid #000;
+}
+.markItUpHeader ul ul .markItUpDropMenu {
+	background:#FFF url(images/submenu.png) no-repeat 100% 50%;
+}
+.markItUpHeader ul .markItUpSeparator {
+	margin:0 10px;
+	width:1px;
+	height:16px;
+	overflow:hidden;
+	background-color:#CCC;
+}
+.markItUpHeader ul ul .markItUpSeparator {
+	width:auto; height:1px;
+	margin:0px;
+}
+/* next rows of buttons */
+.markItUpHeader ul ul ul {
+	position:absolute;
+	top:-1px; left:150px; 
+}
+.markItUpHeader ul ul ul li {
+	float:none;
+}
+.markItUpHeader ul a {
+	display:block;
+	width:16px; height:16px;
+	text-indent:-10000px;
+	background-repeat:no-repeat;
+	padding:3px;
+	margin:0px;
+}
+.markItUpHeader ul ul a {
+	display:block;
+	padding-left:0px;
+	text-indent:0;
+	width:120px; 
+	padding:5px 5px 5px 25px;
+	background-position:2px 50%;
+}
+.markItUpHeader ul ul a:hover  {
+	color:#FFF;
+	background-color:#000;
+}

app/assets/images/markitup/templates/preview.css

+/* preview style examples */
+body {
+	background-color:#EFEFEF;
+	font:70% Verdana, Arial, Helvetica, sans-serif;
+}
\ No newline at end of file

app/assets/images/markitup/templates/preview.html

+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>markItUp! preview template</title>
+<link rel="stylesheet" type="text/css" href="~/templates/preview.css" />
+</head>
+<body>
+<!-- content -->
+</body>
+</html>

app/assets/javascripts/boards.js.coffee

@@ -2,4 +2,6 @@
 # All this logic will automatically be available in application.js.
 # You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
 //= require jquery.markitup
-//= require jquery.markitup.set
\ No newline at end of file
+//= require jquery.markitup.set
+//= require jquery.captcha
+//= require jquery-ui
\ No newline at end of file

app/assets/javascripts/captcha.js.coffee

+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/

app/assets/javascripts/jquery.captcha.js

+;(function( $ ){
+	$.fn.captcha = function(options){
+			
+		
+	var defaults = {  
+	   borderColor: "",  
+	   captchaDir: "/assets/captcha",  
+	   url: "/captcha",  
+	   formId: "topic",  
+	   text: "验证码<br />请把<span>scissors</span>拖进圆圈.",
+	   items: Array("青眼白龙", "黑魔导少女", "星尘龙", "死者苏生", "神之宣告") 
+	  };	
+	
+	var options = $.extend(defaults, options); 
+
+		
+	$(this).html("<b class='ajax-fc-rtop'><b class='ajax-fc-r1'></b> <b class='ajax-fc-r2'></b> <b class='ajax-fc-r3'></b> <b class='ajax-fc-r4'></b></b><img class='ajax-fc-border' id='ajax-fc-left' src='" + options.captchaDir + "/border-left.png' /><img class='ajax-fc-border' id='ajax-fc-right' src='" + options.captchaDir + "/border-right.png' /><div id='ajax-fc-content'><div id='ajax-fc-left'><p id='ajax-fc-task'>" + options.text + "</p><ul id='ajax-fc-task'><li class='ajax-fc-0'><a href='#'><img src='" + options.captchaDir + "/item-none.png' alt='' /></a></li><li class='ajax-fc-1'><a href='#'><img src='" + options.captchaDir + "/item-none.png' alt='' /></a></li><li class='ajax-fc-2'><a href='#'><img src='" + options.captchaDir + "/item-none.png' alt='' /></a></li><li class='ajax-fc-3'><a href='#'><img src='" + options.captchaDir + "/item-none.png' alt='' /></a></li><li class='ajax-fc-4'><a href='#'><img src='" + options.captchaDir + "/item-none.png' alt='' /></a></li></ul></div><div id='ajax-fc-right'><a target='_blank' href='http://www.webdesignbeach.com'><img id='ajax-fc-backlink' src='" + options.captchaDir + "/wdb.png' alt='Web Design Beach' /></a><p id='ajax-fc-circle'></p></div></div><div id='ajax-fc-corner-spacer'></div><b class='ajax-fc-rbottom'><b class='ajax-fc-r4'></b> <b class='ajax-fc-r3'></b> <b class='ajax-fc-r2'></b> <b class='ajax-fc-r1'></b></b>");
+	var rand = $.ajax({ url: options.url,async: false }).responseText;
+
+	var pic = randomNumber();
+	$(".ajax-fc-" + rand).html( "<img src=\"" + options.captchaDir +"/item-" + options.items[pic] + ".png\" alt=\"\" />");
+	$("p#ajax-fc-task span").html(options.items[pic]);
+	$(".ajax-fc-" + rand).addClass('ajax-fc-highlighted');
+	$(".ajax-fc-" + rand).draggable({ containment: '#ajax-fc-content' });
+	var used = Array();
+	for(var i=0;i<5;i++){
+		if(i != rand && i != pic)	
+		{
+			$(".ajax-fc-" +i).html( "<a href='#'><img src=\"" + options.captchaDir +"/item-" + options.items[i] + ".png\" alt=\"\" /></a>");
+			used[i] = options.items[i];
+		}
+	}
+	$(".ajax-fc-container, .ajax-fc-rtop *, .ajax-fc-rbottom *").css("background-color", options.borderColor);
+	$("#ajax-fc-circle").droppable({
+		drop: function(event, ui) {
+			//$(".ajax-fc-" + rand).draggable("disable");
+			$("#" + options.formId).append("<input type=\"hidden\" style=\"display: none;\" name=\"captcha\" value=\"" + rand + "\">");
+		},
+		tolerance: 'touch'
+	});	
+	};
+
+})( jQuery );
+
+function randomNumber() {
+	var chars = "01234";
+	chars += ".";
+	var size = 1;
+	var i = 1;
+	var ret = "";
+		while ( i <= size ) {
+			$max = chars.length-1;
+			$num = Math.floor(Math.random()*$max);
+			$temp = chars.substr($num, 1);
+			ret += $temp;
+			i++;
+		}
+	return ret;
+}
\ No newline at end of file

app/assets/javascripts/topics.js.coffee

@@ -2,4 +2,6 @@
 # All this logic will automatically be available in application.js.
 # You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
 //= require jquery.markitup
-//= require jquery.markitup.set
\ No newline at end of file
+//= require jquery.markitup.set
+//= require jquery.captcha
+//= require jquery-ui

app/assets/stylesheets/boards.css.scss

@@ -3,7 +3,7 @@
 // You can use Sass (SCSS) here: http://sass-lang.com/
 //= require markitup
 //= require markitup.set
-
+//= require captcha
 #topic_name{
 	width:300px;
 	height:25px;

app/assets/stylesheets/captcha.css.scss

+/*img { behavior: image-url("captcha/iepngfix.htc"); }*/
+
+/* FANCY CAPTCHA STARTS */
+.ajax-fc-container { width: 316px; background:#a8d7ea;  color:#fff;  margin:15px 0 0; }
+
+/* rounded corners */
+.ajax-fc-rtop, .ajax-fc-rbottom{ display:block; background: white; }
+.ajax-fc-rtop *, .ajax-fc-rbottom *{ display: block; height: 1px; overflow: hidden; background:#a8d7ea; }
+
+/* describes left and right boxes */
+div#ajax-fc-content { position: absolute; margin-top: -3px; margin-left: 9px; width: 298px; height: 105px; background: image-url("captcha/bg-content-div.png"); }
+div#ajax-fc-content div#ajax-fc-left { width: 200px; height: 100px; float: left; }
+
+div#ajax-fc-content div#ajax-fc-right { width: 98px; height: 100px; float: right; }
+
+/* block left: task and pictures */
+p#ajax-fc-task { line-height: 16px; margin: 0; padding: 11px 0 0 11px; font-size: 12px; font-family: Verdana, Tahoma, Arial; color: #18779d; }
+p#ajax-fc-task span { color: #66a70b; font-weight: bold; }
+
+ul#ajax-fc-task { width: 190px; height: 18px; list-style-type: none; background: image-url("captcha/bg-items.png") -4px 0px; background-repeat: no-repeat; margin: 6px 0 0 0; padding: 5px 0 0 2px; }
+
+/* block right: cycle and backlink */
+ul#ajax-fc-task li { float: left; margin-right: 1px; margin-top: 6px;}
+p#ajax-fc-circle { position: absolute; margin: 18px 0 0 15px; width: 79px; height: 79px; background: image-url("captcha/circle.png"); background-repeat: no-repeat; }
+img#ajax-fc-backlink { position: absolute; margin-top: 1px; margin-left: 6px; border: 0px; z-index: 101; }
+
+/* left and right png borders */
+div#ajax-fc-corner-spacer { height: 99px; }
+img.ajax-fc-border { position: absolute; margin-top: -3px; }
+img.ajax-fc-border#ajax-fc-left { margin-left: 2px; }
+img.ajax-fc-border#ajax-fc-right { margin-left: 307px; }
+
+/* items */
+.ajax-fc-highlighted { cursor: pointer; z-index: 102}
+
+/* rounded corners */
+.ajax-fc-r1{ margin: 0 5px } .ajax-fc-r2{ margin: 0 3px } .ajax-fc-r3{ margin: 0 2px } .ajax-fc-r4{ margin: 0 1px; height: 2px }
+
+/* FANCY CAPTCHA ENDS */
\ No newline at end of file

app/assets/stylesheets/topics.css.scss

@@ -2,4 +2,5 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 //= require markitup
-//= require markitup.set
\ No newline at end of file
+//= require markitup.set
+//= require captcha

app/controllers/captcha_controller.rb

+class CaptchaController < ApplicationController
+  def show
+    render text: session[:captcha]=rand(5).to_s
+  end
+end

app/controllers/topics_controller.rb

@@ -93,10 +93,11 @@ class TopicsController < ApplicationController
     @topic.posts.first.user = @current_user
     @actions = [@topic.category, @topic, "发表主题"]
     respond_to do |format|
-      if @topic.save
+      if params[:captcha] == session[:captcha] and @topic.save
         format.html { redirect_to(@topic, :notice => 'Topic was successfully created.') }
         format.xml  { render :xml => @topic, :status => :created, :location => @topic }
       else
+        @topic.errors[:base] << ("验证码错误") if params[:captcha] != session[:captcha]
         format.html { render :action => "new" }
         format.xml  { render :xml => @topic.errors, :status => :unprocessable_entity }
       end

app/helpers/captcha_helper.rb

+module CaptchaHelper
+end

app/models/topic.rb

@@ -5,7 +5,6 @@ class Topic < ActiveRecord::Base
   has_many :posts
   accepts_nested_attributes_for :posts
   validates :name,  :presence => true
-  
   default_scope where(:deleted => false)
   self.per_page = 20
   

app/views/boards/show.html.erb

@@ -96,7 +96,7 @@
       <p id="notice"><%= notice %></p>
 
       <!--快速发帖-->
-      <%= form_for(@topic, :html => { :multipart => true }) do |f| %>
+      <%= form_for(@topic, :html => { :multipart => true, :id => :topic }) do |f| %>
         <div class="field" id="topic_name_field">
           <%= f.label "name" %>
           <%= f.text_field :name %>
@@ -114,6 +114,7 @@
             </div>
           <% end %>
         </div>
+        <div class="ajax-fc-container">You must enable javascript to see captcha here!</div>
         <%= f.hidden_field :category_id %>
         <%= f.hidden_field :category_type %>
         <div class="actions">
@@ -126,6 +127,14 @@
           $('#fastpostmessage').markItUp(mySettings);
         });
       </script>
+      <script type="text/javascript" charset="utf-8">
+        $(function() {
+          $(".ajax-fc-container").captcha({
+            borderColor: "silver",
+            text: "验证码：请把<span>scissors</span>拖进圆圈"
+          });
+        });
+      </script>
       <dl id="onlinelist">
         <dt>
         <span class="headactions"><a href="boarddisplay.php?fid=68&amp;page=1&amp;showoldetails=yes#online" class="nobdr">

app/views/captcha/show.html.erb

+<h1>Captcha#show</h1>
+<p>Find me in app/views/captcha/show.html.erb</p>

app/views/posts/_form.html.erb

@@ -52,7 +52,7 @@
   <%= f.label :html %><br />
   <%= f.check_box :html %>
   </div>-->
-  <div class="field">
+  <div class="field" style="margin-left: 30px">
     <%= f.label "附件" %><br />
     <%= f.fields_for :attachments do |attachment_form| %>
       <div class="asset field">

app/views/topics/_form.html.erb

-<%= form_for(@topic) do |f| %>
+<%= form_for(@topic, :html => { :multipart => true, :id => :topic }) do |f| %>
   <% if @topic.errors.any? %>
     <div id="error_explanation">
       <h2><%=t 'activerecord.errors.template.header', :count => @topic.errors.size, :model => @topic.class.model_name.human %></h2>
@@ -14,13 +14,13 @@
   <div class="field">
     <%= f.label :board %><br />
     <!--<%= f.select :category_id, Board.all.collect{|board|[board.name, board.id]} %>-->
-    <%= f.hidden :category_id %>
+    <%= f.hidden_field :category_id %>
   </div>
   <div class="field">
     <%= f.label :name %><br />
     <%= f.text_field :name %>
   </div>
-  <div class="field">
+  <div class="field" style="margin-left: 30px">
     <%= f.fields_for :posts, @post do |post_fields| %>
       <%= post_fields.text_area :content, :id => :fastpostmessage %>
       <div class="field">
@@ -36,11 +36,6 @@
         <% end %>
       </div>
     <% end %>
-    <script type="text/javascript">
-      $(document).ready(function()	{
-        $('#fastpostmessage').markItUp(mySettings);
-      });
-    </script>
   </div>
   <!--<div class="field">
   <%= f.label :readperm %><br />
@@ -50,9 +45,23 @@
   <%= f.label :private %><br />
   <%= f.check_box :private %>
   </div>-->
+  <div class="ajax-fc-container" style="margin-left: 30px">You must enable javascript to see captcha here!</div>
   <%= f.hidden_field :displayorder %>
   <%= f.hidden_field :category_type %>
   <div class="actions">
     <%= f.submit %>
   </div>
 <% end %>
+<script type="text/javascript">
+  $(document).ready(function()	{
+    $('#fastpostmessage').markItUp(mySettings);
+  });
+</script>
+<script type="text/javascript" charset="utf-8">
+  $(function() {
+    $(".ajax-fc-container").captcha({
+      borderColor: "silver",
+      text: "验证码：请把<span>scissors</span>拖进圆圈"
+    });
+  });
+</script>
\ No newline at end of file