目录介绍：

• 1、富文本编辑器是什么意思？
• 2、有哪些比较轻的富文本编辑器
• 3、如何使用富文本编辑器
• 4、富文本编辑器
• 5、Javascript实现简单的富文本编辑器附演示
• 6、富文本编辑器怎么做到防注入

富文本编辑器是什么意思？

富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。它是一种解决可一般的用户不同html等网页标记但是需要在网页上设置字体的颜色、大小、样式等信息问题一个文本编辑器。下面简单的介绍一下富文本编辑器的用法和简要的原理。

1、什么是富文本编辑器？

抛开专业的定义，用自己的话来介绍一下到底什么是富文本编辑器。先举个简单的例子，大家大多都使用过网上的一些博客系统或者论坛贴吧吧，那我们要发布一则文章或者消息的时候我们需要在后台设置一下这段文本的格式还有字体的大小粗细颜色等样式，此时网页上会有一个设置这些信息的菜单或者是一个网页的文本编辑器，这个就是富文本编辑器的常见应用，如下图：

富文本编辑器不同于我们平时的文本编辑器，但是其功能确实和我们的平时使用的word的是类似的，只不过富文本编辑器设置是解决不会编写 HTML 的用户并需要设置各种文本格式在我们的网页上。

2、富文本编辑器的原理和应用

关于富文本编辑器的原理，一些人可能以为富文本编辑器的原理十分的复杂，事实上也并非如此，当然功能强大的编辑器自然会很难实现。网页上的富文本编辑器的大致原理是使用JavaScript技术将用户的输入的内容和设置的样式转换为html、css等浏览器可以认识的代码，其核心的实现技术就是JavaScript和html 、css等前端技术。

富文本编辑器的应用，比如做为一个网站的开发者，当我们需要一个发布文章的功能时候，用户可能不知道html代码，此时我们可以使用一些别人写好的富文本编辑器嵌入到我们的程序中即可解决这一问题。

有哪些比较轻的富文本编辑器

做过Web开发的朋友相信都使用过富文本编辑器，比较出名的CuteEditor和CKEditor很多人应该已经使用过，在功能强大的同时需要加载的东西也变得很多。下面要推荐的两款富文本编辑器都是使用JS编写，使用简单，非常轻量级。

1、NicEditor

NicEdit是一个轻量级，跨平台的Inline Content Editor。NicEdit能够让任何 element/div变成可编辑或者能够把标准的TextArea转换成富文本编辑器。

NicEdit是我见过最轻量级的富文本编辑器，总共就一个JS文件和一张图片

使用也非常简单，只需在页面中添加简单的JS代码就可以将TextBox或是TextArea控件转换成富文本编辑器

2、KindEditor

KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写，可以无缝的与Java、.NET、PHP、ASP等程序接合。

如何使用富文本编辑器

方法/步骤

1第一步需要引入UEditor的源文件，和jquery文件，来对编辑器进行支持。如果看到图二的效果则说明部署成功咯，接下来我们就可以根据自己的实际需求来进行场地参数。

2第二步获取编辑器的输入的文本内容，然后对获取的值传递给后台处理，也可通过from表单进行操作。

3配置文件上传，图片上传、截图上传路径（以jsp为例）

首先配置ueditor.config.js来初始化ueditor的安装路径,projectName代表项目路径URL则表示，配置后的ueditor的所在路径（可自定义）,详细配置可看图片所示

4配置好路径后我们就可以调用了，接下来需要配置上传文件的路径了(jsp/config.json)里，需要配置的有imageUrlPrefix图片访问

的路径前缀，imagePathFormat/scrawlPathFormat

等*PathFormat路径用来表示上传的文件路径（注意：windows 和linux的路径不同方式）

5在项目中添加ueditor说需要的jar包文件，然后启动项目。

6项目启动完成后，进入页面，我们可以来试试效果，大家可以任意复制图片，上传文件等来实验下我们的配置结果。出现如下结果则说明我们配置成功了，简单吧。

富文本编辑器

富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。

富文本编辑器不同于文本编辑器，程序员可到网上下载免费的富文本编辑器内嵌于自己的网站或程序里（当然付费的功能会更强大些），方便用户编辑文章或信息。比较好的文本编辑器有kindeditor,fckeditor等。

Javascript实现简单的富文本编辑器附演示

复制代码

代码如下:

span

style="font-size:14px;"!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

""

html

xmlns=""

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

在线演示：

不足之处还请谅解，提出指正方法

富文本编辑器怎么做到防注入

只适合在小应用中，并且处理范围非常有限，简单一点就是过滤／转义，在这我就不多说了，其实方法是非常多。我今天主要讲关于架构方面的知识：你google一下，了解下 WAF(Web应用防火墙)，主要有两方面的：

软件角度的（推荐）：基于nginx的Web应用防火墙／百度的加速了／创新工厂的安全宝......

硬件角度的（不推荐）：NGAF

WAF可处理常见的Web安全有：XSS／SQL注入／跨站脚本／shell注入／会话劫持.....

在软件角度，git上面有不少这方面的开源项目，比如：

还有一些付费的云服务：安全宝／加速了......,可以了解下，确实很有意思，并不是简单的过滤转义。

个人认为：这本身属于网站架构方面的内容，是个全局的控制＝＝输入／输出过滤，这要后台和前台保持一致就可以了。