网站内容编辑器(鲶鱼CMS官方出品的富文本编辑器——HandyEditor)

　　网站内容编辑器(鲶鱼CMS官方出品的富文本编辑器——HandyEditor)

　　做网站编辑的人，希望有一个更合适的编辑，让自己工作起来更加轻松自在。我们平时使用百度的UEditor，但是UEditor的加载文件比较大，UI有点老。最近无意中发现了一个富文本编辑器——HandyEditor，它是鲶鱼cms官方出品的富文本编辑器。撰写此 文章 时的版本是 1. 6.1。我花了一些时间来理解它，我实际上将它应用到我自己的工作中。我认为这很容易上手。这个文章记录了我使用它的收获，让大家可以应用。

　　一、先说一下HandyEditor的特点：

　　1、 好用，只需要引入一个js文件即可。根据官方的介绍，我们只需要在需要使用的页面中添加如下代码即可：

　　然后你可以这样调用它：

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

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

　　在此处添加“style="display: none;"" 是为了不显示默认的文本输入框。当然，ID也可以换成其他的，只要调用方式相同即可。

　　2、轻量级，这是另一个值得注意的特性。HandyEditor 官方下载包不到 100KB，真是出乎意料。这个编辑器也是我目前看到的最轻的一个。富文本编辑器，编辑器重量轻，加载速度快，使用不会卡顿。

　　3、可自定义，这应该是最重要的功能，也是我最喜欢的功能之一。作为一个前端的人，有这样一个可以轻松定制的编辑器是很舒服的。我们可以根据实际需要改变 UI 以适应页面的整体布局。

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

　　我们在编辑器中编辑完内容后，需要获取编辑后的内容并上传到系统后台。获取内容并上传的方式有3种，一种是获取HTML内容，一种是获取纯文本内容，最后一种是将编辑器中的内容同步到textarea，我们来看看如何单独获取：

　　1、获取 HTML 内容：

　　he.getHtml();

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

　　2、获取纯文本内容：

　　he.getText();

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

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

　　he.sync();

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

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

　　前面我们提到过HandyEditor编辑器的调用方式是：

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

　　这是默认的调用方式，我们可以通过添加参数来实现更多的效果。例如，根据实际需要，我们可能需要设置编辑器的宽度和高度，那么我们可以通过以下方法轻松实现：

　　var he = HE.getEditor('editor',{

　　宽度：'300px'，

　　高度：'400px'

　　});

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

　　此外，如果我们需要将编辑器设置为自动增长和浮动，那么我们可以这样做：

　　var he = HE.getEditor('editor',{

　　宽度：'300px'，

　　高度：'400px'，

　　自动高度：真，

　　自动浮动：真

　　});

　　上面代码中的autoHeight是自动增长的。我们可以设置为true实现自动增长，或者设置为false取消自动增长。当你设置为true时，当你编辑的内​​容超出了编辑器原来的高度时，编辑区域会随着内容的增加而不断扩大。

　　代码中的 autoFloat 设置为浮动。浮动是指工具栏的浮动。设置为 true 时，工具栏将始终显示在页面上，以便于操作。您也可以将其设置为 false 以关闭浮动。

　　四、上传图片：

　　一般情况下，我们在编辑一个文章的时候，会上传一些图片来达到图文并茂的效果。下面我们来看看HandyEditor编辑器是如何上传图片的。

　　由于HandyEditor默认禁用上传图片，我们需要先开启上传图片功能，如下：

　　var he = HE.getEditor('editor',{

　　上传照片：是的，

　　uploadPhotoHandler : 'uploadPhoto.php',

　　上传照片大小：0，

　　uploadPhotoType : 'gif,png,jpg,jpeg',

　　uploadPhotoSizeError : '不能上传大于××KB的图片',

　　uploadPhotoTypeError : '只能上传 gif、png、jpg、jpeg 格式的图片'

　　});

　　以上代码是设置上传图片的代码。参数uploadPhoto用于开启图片上传功能。我们可以将其设置为 true 以启用它，或者将其设置为 false 以禁用它。

　　参数uploadPhotoHandler为后台接收图片的服务器地址，可根据实际情况填写。在这段代码中，我们使用PHP作为后台，您也可以将其用于Java、python、node.js等不同的后台接收程序。

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

　　下面的参数比较清楚。uploadPhotoType 用于设置允许上传的图片格式。最后两个参数用于设置上传错误时的提示信息。

　　这里需要提一下，对于上传图片后从服务器返回的数据，我们只需要返回服务器实际可以访问的图片地址即可。比如图片的最终访问地址是×××/img/×××.jpg，那么只要从服务器返回这个地址就可以了。

　　五、切换皮肤：

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

　　1、内部蒙皮：

　　我们从官方获取HandyEditor编辑器并解压后，会发现一个名为“skin”的文件夹，就是存放皮肤文件的地方。我们可以预先将创建好的皮肤文件存放在这个文件夹中，然后通过下面的代码就可以实现换肤：

　　var he = HE.getEditor('editor',{

　　皮肤：'myskin'

　　});

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

　　2、外部蒙皮：

　　外部换肤意味着皮肤文件可以存储在任何地方，只需告诉编辑器皮肤在哪里。让我们看一下代码：

　　var he = HE.getEditor('editor',{

　　externalSkin : 'http://×××/myskin/myskin.css'

　　});

　　以上代码为外部皮肤的使用示例，皮肤地址可根据实际情况更改。

　　以上是我在使用富文本编辑器——HandyEditor时发现的，分享给大家，希望能节省大家探索的时间。