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


Posted in Javascript onJune 16, 2014
<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 相关文章推荐
鼠标移动到一张图片时变为另一张图片
Dec 05 Javascript
js 自制滚动条的小例子
Mar 16 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 Javascript
canvas仿iwatch时钟效果
Mar 06 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
Vue页面骨架屏的实现方法
May 22 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
javascript中闭包closure的深入讲解
Mar 03 Javascript
javascript操纵OGNL标签示例代码
Jun 16 #Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 #Javascript
select多选 multiple的使用示例
Jun 16 #Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 #Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 #Javascript
Js实现滚动变色的文字效果
Jun 16 #Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 #Javascript
You might like
php函数的常用方法及注意之处小结
2011/07/10 PHP
深入解析php之apc
2013/05/15 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
PHP多文件上传类实例
2015/03/07 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
jqTransform美化表单
2015/10/10 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
Pytorch之Variable的用法
2019/12/31 Python
python中的unittest框架实例详解
2021/02/05 Python
台湾最大网路书店:博客来
2018/03/18 全球购物
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
英语教学随笔感言
2014/02/20 职场文书
新学期开学标语
2014/06/30 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
导游词之西安骊山
2019/12/20 职场文书