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

时间：2022-05-22 12:37:11
<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/ 
不足之处还请谅解，提出指正方法！！

相关文章