Javascript实现简单的富文本编辑器

<span style="font-size:14px;"><!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>富文本编辑器</title>
</head>
<body>
	<fieldset>
		<legend>编辑区</legend>
		<div>
			<form>
				字体颜色:
				<select onchange="setFontColor(this)">
					<option value="black">Black    </option>
					<option value="red">Red   </option>
					<option value="green">Green    </option>
					<option value="blue">Blue    </option>
				</select>
				字体样式:
				<select onchange="setFontStyle(this)">
					<option value="bold">Bold    </option>
					<option value="italic">Italic   </option>
					<option value="underline">Underline    </option>
					<option value="striketthrough">StriketThrough    </option>
				</select>
				字体名称:
				<select onchange="setFontFamily(this)">
					<option value="serif">Serif    </option>
					<option value="sans-serif">Sans-serif   </option>
					<option value="monospace">Monospace    </option>
					<option value="comic sans ms">Comic Sans    </option>
				</select>
			</form>
		</div>
		<br/>
		<div id="editableText" contenteditable="true" style="width:400px;min-height:100px;border:2px dashed #ccc"></div>
	</fieldset>
	<script type="text/javascript">
		function setFontColor(obj)
		{
			document.execCommand("forecolor",false,obj.value);
		}
		function setFontStyle(obj)
		{
			document.execCommand(obj.value,false,null);
		}
		function setFontFamily(obj)
		{
			document.execCommand("fontname",false,obj.value);
		}
	</script>
</body>
</html></span>


在线演示:http://jsfiddle.net/Web_Code/nPNv3/embedded/result/  不足之处还请谅解,提出指正方法!!

Javascript实现简单的富文本编辑器,布布扣,bubuko.com

Javascript实现简单的富文本编辑器

上一篇:写Java程序让Jvm崩溃


下一篇:关于C++的vector的实例学习