Javascript实现简单的富文本编辑器附演示
更新时间：2014年06月16日 16:16:49 投稿：whsnow
这篇文章主要介绍了通过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/ 不足之处还请谅解，提出指正方法
相关文章
这篇文章主要介绍了JavaScript隐式类型转换操作,结合实例形式分析了JavaScript隐式类型转换操作相关实现技巧与注意事项,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了Javascript之图片的延迟加载的实例详解的相关资料,这里对延迟加载和异步加载进行了详解和使用方法，需要的朋友可以参考下2017-07-07
Fetch 被称之为下一代 Ajax 技术,内部采用 Promise 方式处理数据API 语法简洁明了,这篇文章主要给大家介绍了关于前端获取资源的方式(ajax、fetch)以及其区别的相关资料,需要的朋友可以参考下2024-07-07
下面小编就为大家带来一篇星期几的不同脚本写法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
JavaScript对象与DOM对象进行绑定会遇到一个问题：如果被绑定的对象的方法中包含this关键字，当事件被触发时this指向的却是DOM对象，而不是之前的JS对象。2011-09-09
这篇文章主要介绍了TS命名空间合并讲解，回顾上一节的内容，在上一节中我们介绍了TS中最常见的声明合并：接口合并，今天要讲的内容也是TS中的声明合并，但这次是命名空间相关的合并,需要的朋友可以参考一下2021-12-12
Express实现前端后端通信上传图片之存储数据库（mysql）傻瓜式教程（一）
这篇文章主要介绍了Express实现前端后端通信上传图片存储数据库（mysql）傻瓜式教程（一）,需要的朋友可以参考下2015-12-12
下面小编就为大家带来一篇js中 计算两个日期间的工作日的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了JS实现多物体缓冲运动实例代码，有需要的朋友可以参考一下2013-11-11
这篇文章主要给大家介绍了JS中可能会常用到的一些数据处理方法,好多知识写下来也能加深一下自身的记忆,文中给出了详细的实例代码,对大家学习或者使用JS具有一定的参考学习价值,需要的朋友可以参考下2021-09-09
最新评论