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 相关文章推荐
jQuery 技巧大全(新手入门篇)
May 12 Javascript
javascript window.opener的用法分析
Apr 07 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
Javascript操作表单实例讲解(下)
Jun 20 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
ES6新特性七:数组的扩充详解
Apr 21 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 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
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
php实现递归与无限分类的方法
2015/02/16 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
英国最大的百货公司:Harrods
2016/08/18 全球购物
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
EJB的基本架构
2016/09/22 面试题
创业计划书的写作技巧及要点
2014/01/31 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
空气的环保标语
2014/06/12 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
生日祝酒词大全
2015/08/10 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers