html5编辑器hbolud,进阶使用 | HandyEditor | 超级轻量web富文本编辑器

HandyEditor的进阶使用方法一、

在基本使用方法的第二步使用如下方式：

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

width : '300px',

height : '400px',

autoHeight : true,

autoFloat : false,

topOffset : 0,

uploadPhoto : true,

uploadPhotoHandler : 'php/uploadPhoto.php',

uploadPhotoSize : 0,

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

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

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

uploadParam:{},

lang : 'zh-jian',

skin : 'HandyEditor',

externalSkin : '',

item : ['bold','italic','strike','underline','fontSize','fontName','paragraph','color','backColor','|','center','left','right','full','indent','outdent','|','link','unlink','textBlock','code','selectAll','removeFormat','trash','|','image','expression','subscript','superscript','horizontal','orderedList','unorderedList','|','undo','redo','|','html','|','about']

});

HandyEditor的参数说明

#

参数名称

参数解释

设置值

1

width

设置编辑器宽度，若不设置，则编辑器宽度自适应

例如：500px

2

height

设置编辑器高度

例如：500px

3

autoHeight

编辑框是否自动增长

true / false

4

autoFloat

工具栏是否浮动

true / false

5

topOffset

工具栏浮动时，距离浏览器顶部的距离，用于某些具有固定头部的页面

例如：30

6

uploadPhoto

是否开启本地图片上传

true / false

7

uploadPhotoHandler

本地图片上传后服务器端的执行文件

例如：php/uploadPhoto.php，HandyEditor使用跟后台是什么语言无关，这里只是用PHP作为演示，可以自行使用其他后台语言，后台返回图片的可访问地址即可

8

uploadPhotoSize

可上传的本地图片最大的大小，0为不限制上传大小，单位为KB

例如：0

9

uploadPhotoType

上传的本地图片类型

例如：'gif,png,jpg,jpeg'

10

uploadPhotoSizeError

上传图片的大小不符合设定值时的提示信息

例如：'不能上传大于××KB的图片'

11

uploadPhotoTypeError

上传的图片类型错误时的提示信息

例如：'只能上传gif,png,jpg,jpeg格式的图片'

12

uploadParam

上传图片时，同时传递给后台的参数

例如：{name: "image", size: 120}

13

lang

使用的语言

目前支持：简体中文(zh-jian)、繁体中文(zh-fan)、英语(en)

14

skin

编辑器使用的皮肤

默认的皮肤为：HandyEditor

15

externalSkin

外部皮肤文件

需要用绝对地址来指定外部皮肤文件

16

item

工具栏显示的内容

可以设置其中的一部分或者全部

以上参数都可以省略，或者只使用其中的一部分

HandyEditor的进阶使用方法二、

以下方法在HandyEditor加载后可以通过JavaScript代码操作编辑器的内容：

he.set('HTML代码');//可以将HTML代码直接填充到编辑器里面，这个可以用于修改或者实时加载内容到编辑器

he.show();//将textarea中的内容同步显示到编辑器里面，这个用于通过JavaScript变更textarea中的内容后，将内容同步到编辑器

打赏：

如果您愿意支持一下，请支付宝扫一扫赞助