富文本编辑HandyEditor

富文本编辑HandyEditor是鲶鱼cms的作者开发的一款前端页面的富文本编辑器，有着小巧易用，方便灵活的特点，是一款轻量型的富文本编辑器。

一、HandyEditor特点：

1、简单，只需要引入一个js文件即可，按官方的介绍，我们只需要在需要使用的页面中加入下面的代码：

1 <script src="HandyEditor.min.js">script>

然后就可以调用了，如下：

1 var he = HE.getEditor('editor');

就这么简单。这里的editor是指的文本输入框的ID，就是HTML的textarea，我们可以用下面的代码：

1 <textarea id="editor" name="editor" rows="5" style="display: none;">textarea>

这里加上“style="display: none;"”是为了不显示默认的文本输入框。当然ID是可以换成其他的，只要调用的时候相同就可以了。

2、轻量，这是又一个很显著的特点，HandyEditor的官方下载压缩包只有不到100KB，这真令人意想不到，这款编辑器也是目前我见到的最轻量的一款富文本编辑器，编辑器的轻量就保证了加载速度快，使用不会卡顿。 3、可定制，这应该是最重要的一个特点了，也是我最喜欢的一个特点，可以方便定制的编辑器是十分舒心的。我们可以根据实际的需要来变更UI来适应页面的整体布局。

二、如何获取编辑器的内容：

我们在编辑器中编辑完内容后，需要获取已经被编辑的内容并且上传到系统后台，获取内容并上传有三种方式，一种是获取HTML内容，另一种是获取纯文本内容，最后一种是将编辑器中的内容同步到textarea中，我们来看一下如何分别获取： 1、获取HTML内容：

1 he.getHtml();

以上就是获取HTML内容的代码，你可以把它赋值给某个变量并上传到后台。

2、获取纯文本内容：

1 he.getText();

以上就是获取纯文本内容的代码，这里获取的仅仅是你在编辑器中输入的文字，不包括HTML代码。

3、提取编辑器内容到textarea：

1 he.sync();

以上代码可以把编辑器中的内容同步到textarea，然后就可以上传到服务器后台了。

三、设置编辑器的宽高以及浮动：

我们在前文提到过调用HandyEditor编辑器的方法是：

1 var he = HE.getEditor('editor');

这个是默认的调用方式，我们可以通过添加参数来实现更多的效果。比方说根据实际需求，我们可能会要求对编辑器的宽和高进行设置，那么我们就可以方便地通过以下方法来实现：

1 var he = HE.getEditor('editor',{
2     width : '300px',
3     height : '400px'
4 });

这里我们把宽度设置为300px，高度设置为400px，你可以根据实际需要进行设置。默认不设置的情况下，编辑器的宽度是自适应的，宽度会随着容器宽度的变化而调整。

进一步，如果我们需要对编辑器设置自动增长和浮动的话，那么可以像下面这样做：

1 var he = HE.getEditor('editor',{
2     width : '300px',
3     height : '400px',
4     autoHeight : true,
5     autoFloat : true
6 });

上面代码中： autoHeight就是自动增长，我们可以设置为true来实现自动增长，也可以设置为false来取消自动增长。当你设置为true时，你编辑的内容超出编辑器原始高度时，编辑区就会随着内容增加而不断增长。 autoFloat是设置浮动的，浮动是指工具条的浮动，当设置为true时，工具条会一直显示在页面中方便操作，你也可以设置为false来关闭浮动。 四、上传图片： 一般情况下，我们在编辑一篇文章时都会上传一些图片，以达到图文并茂的效果，下面我们来看一下HandyEditor编辑器如何上传图片。 由于HandyEditor默认情况下是关闭上传图片的，所以我们需要首先开启上传图片功能，如下代码：

1 var he = HE.getEditor('editor',{
2      uploadPhoto : true,
3      uploadPhotoHandler : 'uploadPhoto.php',
4      uploadPhotoSize : 0,
5      uploadPhotoType : 'gif,png,jpg,jpeg',
6      uploadPhotoSizeError : '不能上传大于××KB的图片',
7      uploadPhotoTypeError : '只能上传gif,png,jpg,jpeg格式的图片'
8 });

上面代码就是设置上传图片的代码，参数uploadPhoto是用于是否开启图片上传功能的，我们可以设置为true开启，或者设置为false关闭。

参数uploadPhotoHandler是服务器后台接收图片的地址，这里可以根据实际情况填写，这个代码里面我们用PHP来作为后台，你也可以用于Java，Asp.net，python，node.js等不同的后台接收程序。

参数uploadPhotoSize表示允许上传的图片文件的大小，如果设置为0，则表示上传大小没有限制，单位为KB，如果你只允许1M以下的图片上传，那么你在这里填入1000就可以了。

后面几个参数比较明确了，uploadPhotoType是用来设置允许上传的图片格式的，最后两个参数分别用于设置上传错误时的提示信息。

这里重点提一下，上传图片后，从服务器返回的数据，我们只需要从服务器回传可以被实际访问的图片地址就可以了。举个例子，比方说图片最终的访问地址是http://×××/img/×××.jpg，那么只要从服务器回传这个地址就完事了。

五、切换皮肤：

HandyEditor编辑器最吸引我的地方就是可以轻松地换皮肤，我们可以根据实际情况来切换需要的皮肤。切换皮肤有两种方式，一种是内部换肤，另一种是外部换肤。我们来分别介绍一下：

1、内部换肤：

我们从官方获取HandyEditor编辑器并解压之后会发现有一个名为“skin”的文件夹，这个文件夹里面就是存放皮肤文件的，我们可以把制作好的皮肤文件事先存入这个文件夹，然后再通过以下代码就可以实现换肤了：

1 var he = HE.getEditor('editor',{
2      skin : 'myskin'
3 });

这里我们假设皮肤文件是“myskin.css”，那么我们只需要填入皮肤文件名即可。

2、外部换肤：

外部换肤的意思是皮肤文件可以存放在任何地方，只需要告诉编辑器皮肤在哪里就可以了。我们来看一下代码：

1 var he = HE.getEditor('editor',{
2      externalSkin : 'http://×××/myskin/myskin.css'
3 });

上面代码就是外部皮肤的使用示例，其中的皮肤地址可以根据实际情况变更。

以上是我在使用富文本编辑器 — HandyEditor时摸索到的内容，分享给大家，希望给大家节省点摸索的时间。

了解更多的话可以前往官网 http://he.catfish-cms.com/advanced.html