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





本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/5139796.html,如需转载请自行联系原作者

相关文章
基于three.js的牛逼轰轰的3D编辑器nunuStudio!
这是一款基于Three.js的3D编辑器,我之前一直喊错,叫人家"牛牛",因为我觉得它真的好牛,其实人家正确拼音喊“努努”! 可以发布web的运行包,直接可以网页端二次开发,真的不要太方便了!
基于three.js的牛逼轰轰的3D编辑器nunuStudio!
|
存储 JavaScript 前端开发
使用Strve.js来搭建一款 Markdown 编辑器
今天,我们来使用Strve.js来搭建一款 Markdown 编辑器,没错!你没听错。我们需要创建了一个实时 Markdown 编辑器,用户可以在 textarea 中输入 Markdown 文本,然后实时显示转换后的 HTML。你可能会说使用 Strve.js 开发会不会写的特别复杂难懂啊,还不如用 Vue.js 呢!
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。
394 1
|
JavaScript
html+css+js实现文本编辑器
html+css+js实现文本编辑器
172 0
|
Web App开发 JavaScript 前端开发
|
存储 前端开发 JavaScript
基于前端技术原生HTML、JS、CSS 电子病历编辑器源码
基于前端技术原生HTML、JS、CSS 电子病历编辑器源码
460 0
|
存储 JSON JavaScript
fabric.js开发图片编辑器可以实现哪些功能?多图
使用fabric.js开发了图片编辑器,用文字加动图的形式直观的分享出来,帮助做功能参考,项目已开源。
794 0
fabric.js开发图片编辑器可以实现哪些功能?多图
|
JSON JavaScript 前端开发
fabric.js开发图片编辑器的细节实现
如何用vue和fabric.js快速开发一款编辑器,并利用fabric.js的api提供标准编辑器的能力。
1422 0
fabric.js开发图片编辑器的细节实现
|
前端开发 JavaScript IDE
千姿百态,瞬息万变,Win11系统NeoVim打造全能/全栈编辑器(前端/Css/Js/Vue/Golang/Ruby/ChatGpt)
我曾经多次向人推荐Vim,其热情程度有些类似现在卖保险的,有的时候,人们会因为一些弥足珍贵的美好暗暗渴望一个巨大的负面,比如因为想重温手动挡的快乐而渴望买下一辆二十万公里的老爷车,比如因为所谓完美的音质而舍不得一个老旧的有线耳机,比如因为一个铜炉火锅而期待北京那漫长而寒冷的冬天。
千姿百态,瞬息万变,Win11系统NeoVim打造全能/全栈编辑器(前端/Css/Js/Vue/Golang/Ruby/ChatGpt)
|
JavaScript 算法 前端开发
【前端算法】JS实现数字千分位格式化
JS实现数字千分位格式化的几种思路,以及它们之间的性能比较
472 1

热门文章

最新文章