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 相关文章推荐
List Installed Hot Fixes
Jun 12 Javascript
Jquery获得控件值的三种方法总结
Feb 13 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
详解javascript中原始数据类型Null和Undefined
Dec 17 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
Jan 20 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 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截取中文字符串不乱码的方法
2013/12/25 PHP
详解php的socket通信
2015/08/11 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
jQuery选择器总结之常用元素查找方法
2016/08/04 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
python 正确保留多位小数的实例
2018/07/16 Python
Django实现表单验证
2018/09/08 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
python温度转换华氏温度实现代码
2020/12/06 Python
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
创建索引时需要注意的事项
2013/05/13 面试题
大学生预备党员自我评价分享
2013/11/16 职场文书
高三政治教学反思
2014/02/06 职场文书
服务承诺书格式
2014/05/21 职场文书
求职简历自荐信
2014/06/18 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
高三化学教学反思
2016/02/22 职场文书
SpringRetry重试框架的具体使用
2021/07/25 Java/Android