首页 > 计算机 >

可在firefox下运行的选定内容自动加标签仿PW的UBB编辑器

本文按署名·非商业用途·保持一致授权
作者:  ,发表于2005年11月04日15时22分 

function editorBar($container,$container_element,$default_text='')
{
	/*
	参数 $container 容器元素,例如document.form1.content
		$container_element 容器的内部 例如value
		$default_text  容器默认的值,使得一个容器为默认值的时候,编辑器对容器进行清空,可选。
	备注 第一个参数和第二个参数必须是可以结合在一起的。例如document.form1.content和value,可组合为document.form1.content.value
	     在这里把它们分开,是因为在运行过程中可能需要参数一的一些其他属性。
	作者 surfchen@gmail.com
	出处 http://www.surfchen.org
	版权 署名·非商业用途·保持一致  http://creativecommons.cn/licenses/by-nc-sa/1.0/
	*/
	$container=str_replace("\"","'",$container);
	ob_flush();
	ob_start();
	?>
	<script type="text/javascript">
	<!--
	function addUbbContent(content,prompt_content)
	{
		if (document.selection) {
			<?=$container?>.focus();
			var sel = document.selection.createRange();
			//alert(sel.text);
			if (sel.text.length > 0) {
				sel.text=content.replace(/\{tpl_ubb\}/,sel.text);
				//sel.text='';
				return ;
			}
		}
		else if (<?=$container?>.selectionStart || <?=$container?>.selectionStart == '0') {
			var startPos = <?=$container?>.selectionStart;
			var endPos = <?=$container?>.selectionEnd;
			if (startPos != endPos) {
				word1 = <?=$container?>.value.substring(0,startPos);
				word2= content.replace(/\{tpl_ubb\}/,<?=$container?>.value.substring(startPos,endPos));
				word3= <?=$container?>.value.substring(endPos,<?=$container?>.value.length);
				<?=$container?>.value=word1+word2+word3;
				<?=$container?>.selectionStart=<?=$container?>.value.length;
				return ;
			}
		}
		input_content='';
		input_content=input_content=prompt(prompt_content,"文字");
		if (<?=$container?>.<?=$container_element?>=='<?=$default_text?>')
		{
			<?=$container?>.<?=$container_element?>='';
		}
		<?=$container?>.<?=$container_element?>+=content.replace(/\{tpl_ubb\}/,input_content);
		setTimeout("<?=$container?>.focus()",200);
	}
	//-->
	</script>
	字型樣式 
<select onChange="addUbbContent('[font='+this.options[this.selectedIndex].value+']{tpl_ubb}[/font]','字體')" name=font>
<option value='細明體' selected>細明體</option>

<option value='標楷體'>標楷體</option>
<option value='新細明體'>新細明體</option>
<option value='黑體'>黑體</option>
<option value='隸書'>隸書</option>
<option value='Andale Mono'>Andale Mono</option>
<option value='Arial'>Arial</option>
<option value='Arial Black'>Arial Black</option>
<option value='Book Antiqua'>Book Antiqua</option>
<option value='Century Gothic'>Century Gothic</option>

<option value='Comic Sans MS'>Comic Sans MS</option>
<option value='Courier New'>Courier New</option>
<option value='Georgia'>Georgia</option>
<option value='Impact'>Impact</option>
<option value='Tahoma'>Tahoma</option>
<option value='Times New Roman'>Times New Roman</option>
<option value='Trebuchet MS'>Trebuchet MS</option>
<option value='Script MT Bold'>Script MT Bold</option>
<option value='Stencil'>Stencil</option>

<option value='Verdana'>Verdana</option>
<option value='Lucida Console'>Lucida Console</option></select>
&nbsp;字型大小
<select onChange="addUbbContent('[size='+this.options[this.selectedIndex].value+']{tpl_ubb}[/size]','字型')" name=size>
<option value=1>1</option><option value=2>2</option><option value=3 selected>3</option>
<option value=4>4</option><option value=5>5</option><option value=6>6</option>
</select>
&nbsp;字型顏色 
<select onChange="addUbbContent('[color='+this.options[this.selectedIndex].value+']{tpl_ubb}[/color]','顔色')" name=color>

<option value='skyblue' style='background-color:skyblue;color:skyblue' selected>&nbsp; &nbsp; &nbsp;  &nbsp;</option>
<option value='royalblue' style='background-color:royalblue;color:royalblue'></option>
<option value='blue' style='background-color:blue'></option>
<option value='darkblue' style='background-color:darkblue'></option>
<option value='orange' style='background-color:orange'></option>
<option value='orangered' style='background-color:orangered'></option>
<option value='crimson' style='background-color:crimson'></option>
<option value='red' style='background-color:red'></option>
<option value='firebrick' style='background-color:firebrick'></option>
<option value='darkred' style='background-color:darkred'></option>
<option value='green' style='background-color:green'></option>
<option value='limegreen' style='background-color:limegreen'></option>
<option value='seagreen' style='background-color:seagreen'></option>
<option value='teal' style='background-color:teal'></option>

<option value='deeppink' style='background-color:deeppink'></option>
<option value='tomato' style='background-color:tomato'></option>
<option value='coral' style='background-color:coral'></option>
<option value='purple' style='background-color:purple'></option>
<option value='indigo' style='background-color:indigo'></option>
<option value='burlywood' style='background-color:burlywood'></option>
<option value='sandybrown' style='background-color:sandybrown'></option>
<option value='sienna' style='background-color:sienna'></option>
<option value='chocolate' style='background-color:chocolate'></option>
<option value='silver' style='background-color:silver'></option></select>
<br><br>
<img onmousedown="addUbbContent('[b]{tpl_ubb}[/b]','粗體')" alt='粗體' src='../images/editor/bold.gif' >
<img onmousedown="addUbbContent('[i]{tpl_ubb}[/i]','斜體')" alt='斜體' src='../images/editor/italic.gif' >
<img onmousedown="addUbbContent('[u]{tpl_ubb}[/u]','底線')" alt='底線' src='../images/editor/underline.gif' >
<img onmousedown="addUbbContent('[align=center]{tpl_ubb}[/align]','置中')" alt='置中' src='../images/editor/center.gif' >
<!-- <img onmousedown="addUbbContent('[]{tpl_ubb}[/]','插入rm電影文件')" alt='插入rm電影文件' src='../images/editor/rm.gif' >
<img onmousedown="addUbbContent('[]{tpl_ubb}[/]','插入wmv在線播放')" alt='插入wmv在線播放' src='../images/editor/mpeg.gif' > -->

<img onmousedown="addUbbContent('[img]{tpl_ubb}[/img]','插入圖片')" alt='插入圖片' src='../images/editor/image.gif' >
<!-- <img onmousedown="addUbbContent('[]{tpl_ubb}[/]','插入 Flash 動畫')" alt='插入 Flash 動畫' src='../images/editor/swf.gif' > -->
<img onmousedown="addUbbContent('{tpl_ubb}','插入url鏈結')" alt='插入url鏈結' src='../images/editor/url.gif' >
<img onmousedown="addUbbContent('[code]{tpl_ubb}[/]code','插入代碼')" alt='插入代碼' src='../images/editor/code.gif' >
<img onmousedown="addUbbContent('[quote]{tpl_ubb}[/quote]','引言回覆')" alt='引言回覆' src='../images/editor/quote.gif' >
<!-- <img onmousedown="addUbbContent('[]{tpl_ubb}[/]','插入列表')" alt='插入列表' src='../images/editor/list_2.gif' > -->
<img onmousedown="addUbbContent('[fly]{tpl_ubb}[/fly]','飛行字')" alt='飛行字' src='../images/editor/fly.gif' >
<img onmousedown="addUbbContent('[move]{tpl_ubb}[/move]','移動字')" alt='移動字' src='../images/editor/move.gif' >
<!-- <img onmousedown="addUbbContent('[]{tpl_ubb}[/]','發光字')" alt='發光字' src='../images/editor/glow.gif' > -->
<?
	$content=ob_get_contents();
	ob_end_clean();
	return $content;
}

DEMO演示
下载

注:你可能需要从别处拷贝一些图象文件。另外函数里用到的HTML代码取自繁体版的PW,所以会出现一些繁体字,请简体用户自行修改。


相关文章:

  1. safari的本地数据库



2个评论

  1. 吟清:

    url使用有问题~!..
    环境firefox

  2. 监控软件:

    怎么用啊?

发表评论

  本站文章若无注明,则以署名·非商业用途·保持一致授权
  桂ICP备05004302号 感谢医元网提供主机 感谢WordPress提供本程序 本模板下载