湖南人爱公司旗下的人爱编辑器,RaEditor, 简称 RA, 它提供类似于 Microsoft Word 的编辑功能,容易被不会编写 HTML 的用户并需要设置各种文本格式的用户所喜爱。它的应用也越来越广泛。最先只有 IE 浏览器支持,其它浏览器相继跟进,在功能的丰富性来说,还是 IE 强些。虽然没有一个统一的标准,但对于最基本的功能,各浏览器提供的 API 基本一致,从而使编写一个跨浏览器的富文本编辑器成为可能。
注意:由于低版本IE浏览器几乎已经被淘汰,所以RaEditor不承诺支持低版本IE浏览器
RaEditor的基本使用方法
1、引入RaEditor的javaScript文件
<script src="RaEditor.min.js"></script>
以上引入方法,需要先下载RaEditor文件到您的电脑或者服务器。您还可以使用CDN方式使用RaEditor,使用CDN方式无需下载文件到本机。
以下是CDN方式的引用:
<script src="https://hnra.vip/gh/xwlrbh/RaEditor@1.9.0/RaEditor.min.js"></script>
2、在您的javaScript代码中添加RaEditor代码
var ra = RA.getEditor('editor');//其中的editor是文本输入框(textarea)的id
3、获取编辑器中的内容
RA.getHtml();//获取HTML代码
RA.getText();//获取纯文本
RA.sync();//将编辑器里面的内容同步到文本输入框(textarea)
RAEditor的参数说明
# | 参数名称 | 参数解释 | 设置值 |
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,RaEditor使用跟后台是什么语言无关,这里只是用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 | 编辑器使用的皮肤 | 默认的皮肤为:RaEditor |
15 | externalSkin | 外部皮肤文件 | 需要用绝对地址来指定外部皮肤文件 |
16 | item | 工具栏显示的内容 | 可以设置其中的一部分或者全部 |
工具栏的各个参数说明如下:
# | 工具名称 | 工具解释 |
1 | bold | 加粗 |
2 | italic | 斜体 |
3 | strike | 删除线 |
4 | underline | 下划线 |
5 | fontSize | 字体大小 |
6 | fontName | 字体名称 |
7 | paragraph | 段落 |
8 | color | 字体颜色 |
9 | backColor | 背景颜色 |
10 | center | 居中 |
11 | left | 左对齐 |
12 | right | 右对齐 |
13 | full | 两端对齐 |
14 | indent | 缩进 |
15 | outdent | 减少缩进 |
16 | link | 链接 |
17 | unlink | 取消链接 |
18 | textBlock | 文本块 |
19 | code | 程序代码 |
20 | selectAll | 全选 |
21 | removeFormat | 去除格式 |
22 | trash | 删除 |
23 | image | 插入图片 |
24 | expression | 表情 |
25 | subscript | 下角标 |
26 | superscript | 上角标 |
27 | horizontal | 水平线 |
28 | orderedList | 有序列表 |
29 | unorderedList | 无序列表 |
30 | undo | 撤销 |
31 | redo | 重做 |
32 | html | html代码 |
33 | about | 关于RaEditor |