<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. 使用Android studio下载github上的工程及问题解决

    Android studio内置了github的插件,可以直接下载github上的工程,感觉好爽啊.具体怎么做呢?1.如图所示操作,如果是初次使用会提示输入用户名密码. 2.等android stud ...

  2. Arachnid包含一个简单的HTML剖析器能够分析包含HTML内容的输入流

    Arachnid是一个基于Java的web spider框架.它包含一个简单的HTML剖析器能够分析包含HTML内容的输入流.通过实现Arachnid的子类就能够开发一个简单的Web spiders并 ...

  3. Android的BUG（二） - SurfaceTexture中的野指针

    当初遇到这个bug,是不定期的低概率出现,最后找到一个比较容易重现的步骤: 启动系统 然后进google +  新建一个帐号(注意是新建一个帐号)  没几步就重启了 这个BUG,一开始追踪也是无头绪的 ...

  4. 如何将UISearchBar上"Cancel"按钮改为”取消“？

    别说话,直接上代码 for (id obj in [searchBar subviews]) {        if ([obj isKindOfClass:[UIView class]]) {    ...

  5. android通过服务实现消息推送

    这里运用到的andorid知识模块主要有Notification和Service,和一个android-async-http-master开源框架 android项目中,有时会有这样一种需求:客户每隔 ...

  6. 利用xshell密钥管理服务器远程登录+VIM dd命令操作之伤之再伤

    1.打开Xshell界面,中文界面方便操作,菜单栏:工具——新建用户密钥生成向导 2.密钥类型选择RSA,密钥长度选择2048位,单击下一步继续: 3.很快生成公钥对,单击下一步继续: 4.密钥名称可 ...

  7. 【代码】Android: 怎样设置app不被系统k掉

    有一种方法可以设置app永远不会被kill,AndroidManifest.xml 中添加: android:persistent="true" 适用于放在/system/app下 ...

  8. kali 国内镜像源，以及PD_tools,Vm_tools的安装

    kali 系统apt-get 更新镜像源,往上分享的有,这里整理下 中科大kali源 deb http://mirrors.ustc.edu.cn/kali sana main non-free co ...

  9. javascript笔记整理（字符串对象）

    一.属性 1.length——字符串的长度(不区分中英文) var a="chen陈"; alert(a.length); //结果:5 2.constructor——对象的构造函 ...

  10. bash on windows

    bash on windows 今年微软Build 2016大会最让开发人员兴奋的消息之一,就是在Windows上可以原生运行Linux bash,对开发人员来说,这是一个喜闻乐见的消息. 1 安装 ...