A-A+
PHP中UBB的使用
在一些小型论坛或者是小型的评论系统中,经常会遇到“支持UBB”之类的术语,其实UBB代码是HTML的一个变种,通过程序自定义我们的标签,比如“[a]PHP中UBB的使用[/a]”这样的标签,其实质就是利用技术查找[a][/a]标签,将其替换成的标准html,说白了,就是将 标准的 html 标记通过技术手段使其简化,其输出出来的结果还是标准的 html。
明白了 ubb 的原理,那么再制作一个简单的 ubb 编辑器就不难了,和 fck 之类的编辑器比较起来,ubb 代码最大的优点就是代码简单,功能很少,简单的ubb只需要一个文件,而且 ubb 标签可以自己来定义,更改起来很方便,在 php 中就是利用替换函数就可以将 html 进行标签化,输出时进行标签的转化,下面是一个 php 中 UBB 使用的源码,仅一个文件,就实现了 ubb 编辑器,网络上有许多变种的 UBB 代码,核心的原理基本上都是一样的。
小说明:[a]https://www.xiariboke.net[/a] 实际标准的html为 <a href=https://www.xiariboke.net >https://www.xiariboke.net</a>,UBB 编辑器将 <a href=https://www.xiariboke.net >https://www.xiariboke.net</a> 进行了标签化,也就是 [a]https://www.xiariboke.net[/a],通过 ubb 标签,代码是不是简洁了许多。
PHP简单UBB界面预览:
<?php /* * To change the template for this generated file go to * Window - Preferences - PHPeclipse - PHP - Code Templates */ function get_ubb($str) { //[a][/a]超链接 $str=preg_replace("/\[a\](.*)\[\/a\]/i","<a href=\\1 >\\1</a>",$s tr); //QQ号码UBB $str = preg_replace("/\[qq\]([0-9]*)\[\/qq\]/i", "<a target=\"_blan k\" href=\"tencent://message/?uin=\${1}&site=www.60ie.net&menu=ye s\"><img src=\"http://wpa.qq.com/pa?p=1:\${1}:8\" alt=\"QQ\${1}\" h eight=\"16\" border=\"0\" align=\"top\" /></a>", $str); //[]超链接 $str=preg_replace("/\[img\](.*?)\[\/img\]/i","<img src=\\1 />",$s tr); return $str; } if($_POST['sub']) { echo $ss=get_ubb($_POST['text']); } ?> <script> function inserttag(topen,tclose){ var themess = document.getElementById('test');//编辑对象 themess.focus(); if (document.selection) {//如果是否ie浏览器 var theSelection = document.selection.createRange().text;//获 //取选区文字 //alert(theSelection); if(theSelection){ document.selection.createRange().text = theSelection = tope n+theSelection+tclose;//替换 }else{ document.selection.createRange().text = topen+tclose; } theSelection=''; }else{//其他浏览器 var scrollPos = themess.scrollTop; var selLength = themess.textLength; var selStart = themess.selectionStart;//选区起始点索引,未选择为0 var selEnd = themess.selectionEnd;//选区终点点索引 if (selEnd <= 2) selEnd = selLength; var s1 = (themess.value).substring(0,selStart);//截取起始点前部分 //字符 var s2 = (themess.value).substring(selStart, selEnd)//截取选择部 //分字符 var s3 = (themess.value).substring(selEnd, selLength);//截取终 //点后部分字符 themess.value = s1 + topen + s2 + tclose + s3;//替换 themess.focus(); themess.selectionStart = newStart; themess.selectionEnd = newStart; themess.scrollTop = scrollPos; return; } } </script><style type="text/css"> <!-- a { font-size: 12px; } --> </style> <hr/> <form action="" method="post"> <a href="javascript:void(0);" onclick='inserttag("[a]","[/a ]");'>添加A标签</a> <a href="javascript:void(0);" onclick='inserttag("[qq]","[/q q]");'>添加QQ标签</a> <a href="javascript:void(0);" onclick='inserttag("[img]","[/i mg]");'>添加IMG标签</a><br/> <textarea id="test" name="text" rows="10" cols="50" wrap="of f"></textarea><br/> <input type="submit" name="sub" value="提交"/> </form>
非常不错
顶顶顶顶
近期刚好需要测试,谢谢