JE 博客页面的"回复"函数quote_comment 修改版

fins

浏览: 2617898 次
性别:
来自: 小胖儿的大城

最近访客更多访客>>

快了的男孩

sagadan

fancycat

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端

Rails Ruby Flash JavaScript 游戏

在blog 页面中, 每个回复旁边的那个"回复"按钮对应的是一个类似"引用" 功能的函数
quote_comment:

  function quote_comment(link) {
    quote_user = $(link).previous(0).innerHTML;
    quote_body = $(link).up().next().innerHTML.stripTags();
    editor.bbcode_editor.textarea.insertAfterSelection('\n' + quote_body + '\n

\n'); }

该函数实现的功能比较简单效果也不是很好.

我做了一个增强的版本, (见后 )

效果也不是很完美主要是解决了多层嵌套引用的问题,
代码写的不是很好而且没有解决换行弄丢的bug.(现在quote_comment 也有该问题)
唉郁闷啊. 这个很难解决, 除非对字符串进行复杂的查找替换等工作.

(但是肯定解决, 毕竟这个引用功能无论多复杂都没有语法着色来得复杂).

最好的方法我觉得需要从两方面下手 :
1是js方面写的再强大些
2是后台到前台输出的html代码结构再重新规划一下.

不过这本身就不是什么重要功能无所谓了.

======================================

我写的这个代码并不好还有很大优化和完善的余地大家一起来吧
就当做个游戏.

其实要想完美实现这个js端的引用还是蛮难的哦有挑战

==============================

代码很长但是其中一些是公共的功能函数, 可以提取出去的.

function quote_comment(link) {
	var BR='\r\n';
	var maxDepth=20,depth=0;
	function removeNode(el){
		if (!el) { 	return;	}
		var orphanDiv= $('_orphan_div');
		if (!orphanDiv) {
			orphanDiv=document.createElement('div');
			orphanDiv.id='_orphan_div';
			orphanDiv.style.display='none';
		}
		orphanDiv.appendChild(el);
		orphanDiv.innerHTML = '';
	}
	
	function getText(el) {
		return el.innerHTML.stripTags();
		//return el.textContent || el.innerText; 
	}
	function createQuote(quoteBody){
		var children=quoteBody.childElements();
		for (var i=0,child;child=children[i];i++) {
			if (child.className=='quote_title') {
				var title=getText(child).strip();
				if (!title||title=="引用") {
					child.innerHTML= BR +'引用
';
				}else{
					title= title.endsWith("写道")?title.substring(0,title.length-2):title;
					child.innerHTML= BR +''+ title.strip() +' 写道
';
				}
				
			}else if (child.className=='quote_div') {
				var subQuoteBody = child.select('[class="quote_div"]');
				var quoteBodyText=null;
				if (subQuoteBody && subQuoteBody.length>0 && depth++<maxDepth ) {
					quoteBodyText = createQuote(child);
				}else{
					quoteBodyText= getText(child);
				}
				child.innerHTML=quoteBodyText+''+BR;
			}else{
				// do nothing
			}
		}
		return getText(quoteBody);
	}


	var quoteUser = getText( $(link).previous(0) );
	var commentBody = $(link).up().next().cloneNode(true);
	var quote=[
		''+quoteUser+' 写道
',
		createQuote(commentBody),
		''+BR
	]
	var editorArea=editor.bbcode_editor.textarea;
	editorArea.insertAfterSelection(quote.join(BR));
	removeNode(commentBody);
}

分享到：

新学一招, 判断一个js对象是不是数组 | 最近我在忙什么: 参与开发一个Ext可视化编 ...

2009-01-11 21:29
浏览 1600
评论(3)
论坛回复 / 浏览 (3 / 1658)
分类:Web前端
查看更多

3 楼 QuakeWang 2009-01-12

汗，通过回帖发现一个bbcode到html转换的bug，被code包含起来的bbcode也被转换了，赶紧去修改

2 楼 fins 2009-01-12

代码贴到这里来就乱了

这个要是想用JS做个完美的确实不简单啊

而且我觉得"完美"应该做不到

bbcode-->html的时候有些东西会丢失 , 或者是多个不同的东西转换成了一种html

有时候是不可逆的吧

除非在 bbcode-->html 时就像语法着色时一样, 用很多的DIV SPAN(配合class)对很多东西都做出标记

1 楼 QuakeWang 2009-01-12

这个功能是为了提供一个简单的引用回复，要用js完美解决相当于实现一个HTML到BBCode完全转换，我们后台的ruby代码实现过一次（用正则表达式的），移植到js倒是很简单。
在贴上我的实现之前，先贴单元测试的代码，你可以试试看用js来通过所有的单元测试：

require 'test/unit'
require 'bbcodeize_helper'

class DeBbcodeizerTest < Test::Unit::TestCase
  include BBCodeizeHelper
      
  def test_bold
    assert_equal(
      "I am [b]really[/b] happy!",
      debbcodeize("I am <strong>really</strong> happy!"))
  end
  
  def test_italic
    assert_equal(
      "Have you read [i]Catcher in the Rye[/i]?",
      debbcodeize("Have you read <em>Catcher in the Rye</em>?"))
  end
  
  def test_underline
    assert_equal(
      "[u]Please note[/u]:",
      debbcodeize("<u>Please note</u>:"))
  end
  
  def test_email
    assert_equal(
      "You can also [email=jd@example.com]contact me by e-mail[/email].",
      debbcodeize("You can also <a href=\"mailto:jd@example.com\">contact me by e-mail</a>."))
  end
  
  def test_url
    assert_equal(
      "Check out [url=http://www.rubyonrails.com]Ruby on Rails[/url]!",
      debbcodeize("Check out <a href=\"http://www.rubyonrails.com\">Ruby on Rails</a>!"))
    assert_equal(
      "Check out [url=http://www.rubyonrails.com]Ruby on Rails[/url]!",
      debbcodeize("Check out <a href=\"http://www.rubyonrails.com\" target=\"_blank\">Ruby on Rails</a>!"))    
  end
  
  def test_image
    assert_equal(
      "[img]http://example.com/example.gif[/img]",
      debbcodeize("<img src=\"http://example.com/example.gif\" />"))
  end
  
  def test_align
    assert_equal("[align=center]test[/align]", debbcodeize("<div align=\"center\">test</div>"))
  end

  def test_align
    assert_equal("[align=center]test[/align]", debbcodeize("<div style=\"align: center\">test</div>"))
  end
  
  def test_flash
    assert_equal("[flash=100,50]a.swf[/flash]",debbcodeize('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100" height="50"><param name="movie" value="a.swf" /><param name="quality" value="high" /><param name="menu" value="false" /><param name="wmode" value="" /><embed src="a.swf" wmode="" quality="high" menu="false" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="50"></embed></object>'))
    assert_equal("[flash=100,50]a.swf[/flash]",debbcodeize("<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" width=\"100\" height=\"50\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0\">\n<param name=\"src\" value=\"a.swf\" /><embed type=\"application/x-shockwave-flash\" width=\"100\" height=\"50\" src=\"a.swf\"></embed>\n</object>"))
  end  
  
  def test_size
    assert_equal(
      "[size=32]Big Text[/size]",
      debbcodeize("<span style=\"font-size: 32\">Big Text</span>"))
  end
  
  def test_color
    assert_equal(
      "[color=red]Red Text[/color]",
      debbcodeize("<span style=\"color: red\">Red Text</span>"))
  end

  def test_dequote
    assert_equal(
      "[quote=\"name\"]test\nquote",
      debbcodeize("<div class=\"quote_title\">name 写道</div><div class=\"quote_div\">test\nquote</div>")
    )
    assert_equal(
      "[quote=\"name\"]test\nquote",
      debbcodeize("<div class=\"quote_title\">name 写道</div>\n<div class=\"quote_div\">test\nquote</div>")
    )    
    assert_equal(
      "[quote=\"name\"]test\nquotetest\n",
      debbcodeize("<div class=\"quote_title\">name 写道</div><div class=\"quote_div\">test\nquote</div><p>test</p>")
    )    
    assert_equal(
      "引用
test\nquote",
      debbcodeize("<div class=\"quote_title\">引用</div><div class=\"quote_div\">test\nquote</div>")
    )
    assert_equal(
      "引用
test\nquote",
      debbcodeize("<div class=\"quote_title\">引用</div>\n<div class=\"quote_div\">test\nquote</div>")
    )    
    assert_equal(
      "引用
test\nquote
test引用
test\nquote",
      debbcodeize("<div class=\"quote_title\">引用</div><div class=\"quote_div\">test\nquote</div>test<div class=\"quote_title\">引用</div><div class=\"quote_div\">test\nquote</div>")
    )    
  end
  
  def test_nested_quote
    assert_equal(
      '1 写道
1 写道
a',
      debbcodeize(bbcodeize('1 写道
1 写道
a'))
    )
  end
end

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论