<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. 引用 mkimage使用详解

    引用 鱼 的 mkimage使用详解  uboot源代码的tools/目录下有mkimage工具,这个工具可以用来制作不压缩或者压缩的多种可启动映象文件. mkimage在制作映象文件的时候,是在原来 ...

  2. shell 脚本阅读之二——ltp工具下的runltp

    #!/bin/sh ################################################################################ ## ## ## ...

  3. Lucene核心--构建Lucene搜索(上篇，理论篇)

    2.1构建Lucene搜索 2.1.1 Lucene内容模型 一个文档(document)就是Lucene建立索引和搜索的原子单元,它由一个或者多个字段(field)组成,字段才是Lucene的真实内 ...

  4. Eclipse生成Jar包方法

    Eclipse生成jar包   第一:普通类导出jar包,我说的普通类就是指此类包含main方法,并且没有用到别的jar包. 1.在eclipse中选择你要导出的类或者package,右击,选择Exp ...

  5. Qt实现不同Treewidget之间拖拽

    拖拽是编程中经常要用到的,我这里主要是实习了Treewidget之间直接拖拽Item,按下Ctrl键的话是copy,不按Ctrl则是Move.以下是实现代码 class TreeItemMimeDat ...

  6. C语言的system函数

     这个是与操作系统有关的函数,在linux/unix下system可以运行所有的shell命令windows下system可运行所有的windows执行文件,除DOS命令外,也可运行windwos ...

  7. Windows Azure 安全最佳实践 - 第 6 部分：Azure 服务如何扩展应用程序安全性

    多种Windows Azure服务可以帮助您将应用程序安全性扩展到云. 有三种服务可提供多个提供程序之间的身份标识映射.内部部署数据中心间的连接和相互发送消息的应用程序功能(无论应用程序位于何处). ...

  8. Android开发10.1：UI组件适配器AdapterView(创建ListView,Adapter接口)

    @version:Android4.3 API18 @author:liuxinming 概述               AdapterView继承了ViewGroup,它的本质是容器       ...

  9. 利用Winscp,Putty实现Windows下编写Linux程序

    本文讲的方案实现以下功能:利用winscp和putty的脚本功能,实现在Window平台上编写代码,上传到Linux进行编译,然后取编译结果.需要用到3个文件,分别如下: (1) synchroniz ...

  10. WCF技术剖析之二十: 服务在WCF体系中是如何被描述的?

    原文:WCF技术剖析之二十: 服务在WCF体系中是如何被描述的? 任何一个程序都需要运行于一个确定的进程中,进程是一个容器,其中包含程序实例运行所需的资源.同理,一个WCF服务的监听与执行同样需要通过 ...