论坛首页 Web前端技术论坛

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

浏览 1652 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-01-11  
在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); }
   发表时间:2009-01-12   最后修改: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
0 请登录后投票
   发表时间:2009-01-12  
代码贴到这里来就乱了

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

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

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

有时候是不可逆的吧

除非在 bbcode-->html 时 就像语法着色时一样, 用很多的DIV SPAN(配合class)对很多东西都做出标记
0 请登录后投票
   发表时间:2009-01-12   最后修改:2009-01-12
汗,通过回帖发现一个bbcode到html转换的bug,被code包含起来的bbcode也被转换了,赶紧去修改
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics