HandyEditor

一款十分轻便且使用方便的所见即所得web富文本编辑器,由Catfish(鲶鱼) CMS官方开发

同时适用于移动端和pc端


立即下载    最新版本:1.6.1    GitHub

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格式的图片',
  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 lang 使用的语言 目前支持:简体中文(zh-jian)、繁体中文(zh-fan)、英语(en)
13 skin 编辑器使用的皮肤 默认的皮肤为:HandyEditor
14 externalSkin 外部皮肤文件 需要用绝对地址来指定外部皮肤文件
15 item 工具栏显示的内容 可以设置其中的一部分或者全部

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


HandyEditor的进阶使用方法二、

以下方法在HandyEditor加载后可以通过JavaScript代码操作编辑器的内容:
he.set('HTML代码');//可以将HTML代码直接填充到编辑器里面,这个可以用于修改或者实时加载内容到编辑器
he.show();//将textarea中的内容同步显示到编辑器里面,这个用于通过JavaScript变更textarea中的内容后,将内容同步到编辑器

打赏:

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

支付宝扫一扫赞助


最好用的html5富文本编辑器,移动端pc端自适应
官方网站 | HandyEditor