富⽂本编辑器HandyEditor使⽤详解
做⽹站编辑的都希望有⼀款⽐较适⽤的编辑器，这样⼯作起来会感觉⽐较轻松和⾃如。我们平常多会使⽤百度的UEditor，但是UEditor的加载⽂件相对来说太⼤，⽽且UI已经有点旧了。最近在偶然间发现了⼀款富⽂本编辑器 — HandyEditor，这是⼀款鲶鱼CMS官⽅出品的富⽂本编辑器，写这篇⽂章时的版本是1.6.1。花了点时间了解了⼀下，并在⾃⼰的⼯作中实际的应⽤了⼀下，觉得⼗分容易上⼿，这篇⽂章把我使⽤中的所得记录下来，⽅便⼤家应⽤。
⼀、先来说⼀下HandyEditor这款编辑器的特点吧：
1、是使⽤简单，只需要引⼊⼀个js⽂件即可，按官⽅的介绍，我们只需要在需要使⽤的页⾯中加⼊下⾯的代码：
<script src="HandyEditor.min.js"></script>
然后就可以调⽤了，如下：
var he = HE.getEditor('editor');
就这么简单。这⾥的editor是指的⽂本输⼊框的ID，就是HTML的textarea，我们可以⽤下⾯的代码：
<textarea id="editor" name="editor" rows="5" ></textarea>
这⾥加上“”是为了不显⽰默认的⽂本输⼊框。当然ID是可以换成其他的，只要调⽤的时候相同就可以了。
2、轻量，这是⼜⼀个很显著的特点，HandyEditor的官⽅下载压缩包只有不到100KB，这真令⼈意想不到，这款编辑器也是⽬前我见到的最轻量的⼀款富⽂本编辑器，编辑器的轻量就保证了加载速度快，使⽤不会卡顿。
3、可定制，这应该是最重要的⼀个特点了，也是我最喜欢的⼀个特点，作为前端⼈员，有这样⼀款可以⽅便定制的编辑器是⼗分舒⼼的。我们可以根据实际的需要来变更UI来适应页⾯的整体布局。
⼆、如何获取编辑器的内容：
我们在编辑器中编辑完内容后，需要获取已经被编辑的内容并且上传到系统后台，获取内容并上传有三种⽅式，⼀种是获取HTML内容，另⼀种是获取纯⽂本内容，最后⼀种是将编辑器中的内容同步到textarea中，我们来看⼀下如何分别获取：
1、获取HTML内容：
以上就是获取HTML内容的代码，你可以把它赋值给某个变量并上传到后台。
2、获取纯⽂本内容：
以上就是获取纯⽂本内容的代码，这⾥获取的仅仅是你在编辑器中输⼊的⽂字，不包括HTML代码。
3、提取编辑器内容到textarea
he.sync();
asp富文本编辑器以上代码可以把编辑器中的内容同步到textarea，然后就可以上传到服务器后台了。
三、设置编辑器的宽⾼以及浮动：
我们在前⽂提到过调⽤HandyEditor编辑器的⽅法是：
var he = HE.getEditor('editor');
这个是默认的调⽤⽅式，我们可以通过添加参数来实现更多的效果。⽐⽅说根据实际需求，我们可能会要求对编辑器的宽和⾼进⾏设置，那么我们就可以⽅便地通过以下⽅法来实现：
var he = HE.getEditor('editor',{
width : '300px',
height : '400px'
});
这⾥我们把宽度设置为300px，⾼度设置为400px，你可以根据实际需要进⾏设置。默认不设置的情况下，编辑器的宽度是⾃适应的，宽度会随着容器宽度的变化⽽调整。
进⼀步，如果我们需要对编辑器设置⾃动增长和浮动的话，那么可以像下⾯这样做：
var he = HE.getEditor('editor',{
width : '300px',
height : '400px',
autoHeight : true,
autoFloat : true
});
上⾯代码中的autoHeight就是⾃动增长，我们可以设置为true来实现⾃动增长，也可以设置为false来取消⾃动增长。当你设置为true时，你编辑的内容超出编辑器原始⾼度时，编辑区就会随着内容增加⽽不断增长。
代码中的autoFloat是设置浮动的，浮动是指⼯具条的浮动，当设置为true时，⼯具条会⼀直显⽰在页⾯中⽅便操作，你也可以设置为false来关闭浮动。
四、上传图⽚：
⼀般情况下，我们在编辑⼀篇⽂章时都会上传⼀些图⽚，以达到图⽂并茂的效果，下⾯我们来看⼀下HandyEditor编辑器如何上传图⽚。
由于HandyEditor默认情况下是关闭上传图⽚的，所以我们需要⾸先开启上传图⽚功能，如下代码：
var he = HE.getEditor('editor',{
uploadPhoto : true,
uploadPhotoHandler : 'uploadPhoto.php',
uploadPhotoSize : 0,
uploadPhotoType : 'gif,png,jpg,jpeg',
uploadPhotoSizeError : '不能上传⼤于××KB的图⽚',
uploadPhotoTypeError : '只能上传gif,png,jpg,jpeg格式的图⽚'
});
上⾯代码就是设置上传图⽚的代码，参数uploadPhoto是⽤于是否开启图⽚上传功能的，我们可以设置为true开启，或者设置为false关闭。
参数uploadPhotoHandler是服务器后台接收图⽚的地址，这⾥可以根据实际情况填写，这个代码⾥⾯我们⽤PHP来作为后台，你也可以⽤于Java，Asp，python，node.js等不同的后台接收程序。
参数uploadPhotoSize表⽰允许上传的图⽚⽂件的⼤⼩，如果设置为0，则表⽰上传⼤⼩没有限制，单位为KB，如果你只允许1M以下的图⽚上传，那么你在这⾥填⼊1000就可以了。
后⾯⼏个参数⽐较明确了，uploadPhotoType是⽤来设置允许上传的图⽚格式的，最后两个参数分别⽤于设置上传错误时的提⽰信息。
五、切换⽪肤：
HandyEditor编辑器最吸引我的地⽅就是可以轻松地换⽪肤，我们可以根据实际情况来切换需要的⽪肤。切换⽪肤有两种⽅式，⼀种是内部换肤，另⼀种是外部换肤。我们来分别介绍⼀下：
1、内部换肤：
我们从官⽅获取HandyEditor编辑器并解压之后会发现有⼀个名为“skin”的⽂件夹，这个⽂件夹⾥⾯就是存放⽪肤⽂件的，我们可以把制作好的⽪肤⽂件事先存⼊这个⽂件夹，然后再通过以下代码就可以实现换肤了：
var he = HE.getEditor('editor',{
skin : 'myskin'
});
这⾥我们假设⽪肤⽂件是“myskin.css”，那么我们只需要填⼊⽪肤⽂件名即可。
2、外部换肤：
外部换肤的意思是⽪肤⽂件可以存放在任何地⽅，只需要告诉编辑器⽪肤在哪⾥就可以了。我们来看⼀下代码：
var he = HE.getEditor('editor',{
externalSkin : '×××/myskin/myskin.css'
});
上⾯代码就是外部⽪肤的使⽤⽰例，其中的⽪肤地址可以根据实际情况变更。
以上是我在使⽤富⽂本编辑器 — HandyEditor时摸索到的内容，分享给⼤家，希望给⼤家节省点摸索的时间。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。