您的位置：首页 > Web前端 > JavaScript

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

2014-06-15 15:53 246 查看

<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/
不足之处还请谅解，提出指正方法！！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航