<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实现简单的富文本编辑器的更多相关文章

  1. 基于ABP做一个简单的系统——实战篇：4.基于富文本编辑器，Razor模板引擎生成内容并导出Word 填坑记录

    起因 需求是这样的,有一种协议需要生成,协议的模板是可配置的,在生成过程中,模板中的内容可以根据约定的标记进行替换(就像mvc的razor模板一样).生成后的内容还需要导出成word或pdf. 常见的 ...

  2. Html富文本编辑器

    本文推荐两款简单的富文本编辑器[KindEditor,NicEdit]用于获得所见即所得的编辑效果,本文仅供学习分享使用,如有不足之处,还请指正. 概述 这两款编辑器都是采用JavaScript编写, ...

  3. UMeditor百度富文本编辑器的使用

    批量上传的图片在线管理没法查看图片 是因为jar包本身的Bug,这里暂时做了个替换展示.就是找到Img.js  然后搜索 img.set 替换下就好了 var url=list[i].url ;    ...

  4. 富文本编辑器&FileReader

    最近在做一个web版的管理Tool,其中包括一个编辑框,要求能够编辑文字,插入图片,最后导出做成一个Html.对于资深人士看来,这很容易啊,不就是一个富文本编辑框吗?这其实就是一个概念的问题,对有经验 ...

  5. summernote 富文本编辑器限制输入字符长度

    项目中需要一个比较简单的富文本编辑器,于是选中了summernote .虽然比较轻量,但是在开发中也遇到了几个问题,在此记录一下. 1:样式和bootstrap冲突,初始化之后显示为: .note-e ...

  6. 富文本编辑器防止xss注入javascript版

    富文本编辑器:ueditor 其实富文本编辑器已经有防止xss注入功能,但是你服务端程序在接收的时候在做一次转义,否则有可能然后前端验证直接提交数据导致被xss攻击. 为了节省后端程序开销则在前端 显 ...

  7. 富文本编辑器UEditor自定义工具栏（三、自定义工具栏功能按钮图标及工具栏样式简单修改）

    导读 富文本编辑器UEditor提供丰富了定制配置项,如果想设置个性化的工具栏按钮图标有无办法呢?答案是肯定的!前两篇博文简要介绍了通过将原工具栏隐藏,在自定义的外部按钮上,调用UEditor各命令实 ...

  8. 10个免费的javascript富文本编辑器（jQuery and non-jQuery）

    祝愿园子里的朋友圣诞节快乐. 本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器 简介 Javascr ...

  9. 富文本编辑器--引入demo和简单使用

    wangEditor —— 轻量级 web 富文本编辑器,配置方便,使用简单.支持 IE10+ 浏览器. 官网:www.wangEditor.com 文档:www.kancloud.cn/wangfu ...

随机推荐

  1. JavaScript 、ECMAScript、commonJS 发展历史 与标准化发展

    本文介绍下JavaScript和 ECMAScript的诞生及发展历史,以及标准化过程. 一.JavaScript诞生 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版. ...

  2. 带符号的char类型取值范围为什么是-128——127

    以前经常看到带符号的char类型取值范围是-128——127,今天突然想为什么不是-127——127,-128是怎么来的? 127好理解,char类型是8位,最高位是符号位,0正1负,所以011111 ...

  3. 如何A掉未来程序改

    话说有这样一道神题:[集训队互测2015]未来程序·改. 大意是要求写一个简单的C++解释器!这里去掉了C++的许多特性,连简单的break和continue都没有了! 话说NOI被屠了之后,一时心血 ...

  4. Android编程心得-设计一个可重用的自定义Dialog

            我们在实际开发过程中,会遇到一个问题,我们的Dialog如果使用一般的方法进行设置调用出来,会有很多的重复代码,如何将Dialog按照自己的思路设计呢,并让其可重用呢,下面我来介绍一下 ...

  5. android学习--视图列表（ListView和ListActivity）

    说明: 视图列表(ListView和ListActivity)与AutoComplete.Spinner类似,它们都须要一个供显示的列表项,能够须要借助于内容Adapter提供显示列表项 创建List ...

  6. 关于PhpDE zend ide破解方式

    1.文件和汉化文件 ZendStudio官方下载地址:http://www.geekso.com/component/zendstudio-downloads/ 百度云地址: 10.0.0.msi文件 ...

  7. 关于Dropdownlist使用的心得体会

    2013-07-23关于Dropdownlist使用的心得体会: Dropdownlist使用最多的几个属性: 一.Dropdownlist.Items,负责包含所有选项的容器 DropDownLis ...

  8. Android下调用收发短信邮件等

    Android下调用收发短信邮件等 1,调web浏览器Uri myBlogUri = Uri.parse("http://xxxxx.com");returnIt = new In ...

  9. linux eclipse中运行android AVD 错误

    当使用android的AVD时提示以下错误: Starting emulator for AVD 'NexusOne' ERROR: 32-bit Linux Android emulator bin ...

  10. kiddouk/redisco

    kiddouk/redisco A Python Library for Simple Models and Containers Persisted in Redis