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实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
使用js画图之饼图
Jan 12 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
BootStrop前端框架入门教程详解
Dec 25 Javascript
基于vue-video-player自定义播放器的方法
Mar 21 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 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正则提取或替换img标记属性
2013/06/26 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
AJAX的使用方法详解
2017/04/29 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
node中的session的具体使用
2018/09/14 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
Python中的ConfigParser模块使用详解
2015/05/04 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
对numpy中shape的深入理解
2018/06/15 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
经济信息系毕业生自荐信范文
2014/03/15 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
领导干部考核评语
2015/01/04 职场文书
通讯稿范文
2015/07/22 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
GO中sync包自由控制并发示例详解
2022/08/05 Golang