<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. iOS swift lazy loading

    Why bother lazy loading and purging pages, you ask? Well, in this example, it won't matter too much ...

  2. BZOJ 3375: [Usaco2004 Mar]Paranoid Cows 发疯的奶牛( set )

    果然写得短就跑得慢... 直接用set就行了(你要写棵平衡树也可以).没有包含的话, 假如L(i) <= L(j), 那么R[i] <= R[j]. 所以从小到大扫, 每次查找左端点小于当 ...

  3. 04-IOSCore - User Defaults、Archive、存储总结

    一. User Defaults 1. 是什么? 是一个特殊的plist文件 2. 干什么? 用于保存应用的配置信息 3. 存什么信息? 信息:欢迎界面有没有被打开过 目的:欢迎界面只显示一次 信息: ...

  4. windows下使用openssl的一种方法

    下载openssl之后,全部解压到一个路径下,如:c:\program files\openssl sdk 举个例子,如使用SHA1,开发时引用头文件: #include <sha.h> ...

  5. 读取sd卡下图片，由图片路径转换为bitmap

    public Bitmap convertToBitmap(String path, int w, int h) {             BitmapFactory.Options opts = ...

  6. MySQL 修改字段类型或长度

    mysql> alter table 表名 modify column 字段名 类型;例如 数据库中address表 city字段是varchar(30) 修改类型可以用(谨慎修改类型,可能会导 ...

  7. yii phpexcel自己主动生成文件保存到server上

    近期再整一个报表任务,每天必须把表导出来按excel格式发送邮件给管理员,利用phpexcel把表保存到server上.然后再通过phpmailer发送就ok. ob_end_clean();     ...

  8. Codeforces Round #272 (Div. 2)AK报告

    A. Dreamoon and Stairs time limit per test 1 second memory limit per test 256 megabytes input standa ...

  9. crm高速开发之QueryExpression

    /* 创建者:菜刀居士的博客  * 创建日期:2014年07月06号  */ namespace Net.CRM.OrganizationService {     using System;     ...

  10. WCF技术剖析之九：服务代理不能得到及时关闭会有什么后果?

    原文:WCF技术剖析之九:服务代理不能得到及时关闭会有什么后果? 我们想对WCF具有一定了解的人都会知道:在客户端通过服务调用进行服务调用过程中,服务代理应该及时关闭.但是如果服务的代理不等得到及时的 ...