新版本1.4.2发布了。第一次升级到 1.4.x 版本请注意在1.4.0版本的重大变动,具体请阅读更新日志

开发者文档

富文本编辑器集成自百度的UEditor编辑器,地址:UEditor

使用富文本编辑器必须要将SUI版本升级到 1.2.0 版本以上。
富文本编辑器还处在测试阶段,上传图片目前只支持URL上传,我们后续会逐渐完善更多功能。有任何问题或者建议可以随时反馈给我们。

注意,使用富文本编辑器必须额外引入如下三个文件:

初始化

完整demo


              

初始化编辑器:

目前只支持一次实例化一个编辑器,如需多个请分开初始化。

  • 1)var $editor = $('#id').editor();id为插入编辑器的dom节点的ID,初始化生成默认配置的富文本编辑器;
  • 2) 在需要插入富文本编辑器的dom容器上加一个class="sui-editor",可自动初始化一个默认配置的编辑器,如:<div class="sui-editor"></div>
  • 3)也可以在实例化时传入自定义参数项对象,改变默认配置,如:var $editor = $('#editor').editor({toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold','test']]});

    可自定义参数:

    参数 默认值 说明
    toolbars{2d Array} 即demo所见插件 工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的从新定义
    isShow {Boolean} true 默认显示编辑器
    textarea{String} 'editorValue' 提交表单时,服务器获取编辑器提交内容的所用的参数,多实例时可以给容器name属性,会将name给定的值最为每个实例的键值,不用每次实例化的时候都设置这个值
    initialContent {String} '' 初始化编辑器的内容
    autoClearinitialContent {Boolean} true 是否自动清除编辑器初始内容,注意:如果focus属性设置为true,这个也为真,那么编辑器一上来就会触发导致初始化的内容看不到了
    focus {Boolean} true 初始化时,是否让编辑器获得焦点true或false
    indentValue {String} '2em' 首行缩进距离,默认是2em
    initialFrameWidth {Number} 1000 初始化编辑器宽度
    initialFrameHeight {Number} 320 初始化编辑器高度
    readonly {Boolean} false 编辑器初始化结束后,编辑区域是否是只读的
    autoClearEmptyNode {Boolean} true getContent时,是否删除空的inlineElement节点(包括嵌套的情况)
    enableAutoSave {Boolean} true 启用自动保存
    saveInterval {Number} 500 自动保存间隔时间,单位ms
    fullscreen {Boolean} false 是否开启初始化时即全屏,默认关闭
    retainOnlyLabelPasted {Boolean} false 粘贴只保留标签,去除标签所有属性
    pasteplain {Boolean} false 是否默认为纯文本粘贴。false为不使用纯文本粘贴,true为使用纯文本粘贴
    filterTxtRules {Object} 纯文本粘贴模式下的过滤规则
    listDefaultPaddingLeft '30' 默认的左边缩进的基数倍
    autoTransWordToList {Boolean} false 禁止word中粘贴进来的列表自动变成列表标签
    fontsize {Array} [10, 11, 12, 14, 16, 18, 20, 24, 36] 字号
    lineheight {Array} ['1', '1.5','1.75','2', '3', '4', '5'] 行内间距 值和显示的名字相同
    wordCount {Boolean} true 是否开启字数统计
    maximumWords {Number} 10000 允许的最大字符数
    wordCountMsg {String} '当前已输入{#count}个字符, 您还可以输入{#leave}个字符。 ' 当前已输入 {#count} 个字符,您还可以输入{#leave} 个字符,字数统计提示,{#count}代表当前字数,{#leave}代表还可以输入多少字符数
    wordOverFlowMsg {String} '你输入的字符个数已经超出最大允许值,服务器可能会拒绝保存!' 超出字数限制提示
    maxUndoCount {Number} 20 可以最多回退的次数
    maxInputCount {Number} 1 当输入的字符数超过该值时,保存一次现场
    autoHeightEnabled {Boolean} true 是否自动长高
    scaleEnabled {Number} false 是否可以拉伸长高,默认true(当开启时,自动长高失效)
    minFrameWidth {Number} 800 编辑器拖动时最小宽度
    minFrameHeight {Number} 220 编辑器拖动时最小高度
    topOffset {Number} 30 浮动时工具栏距离浏览器顶部的高度,用于某些具有固定头部的页面
    toolbarTopOffset {Number} 400 编辑器底部距离工具栏高度(如果参数大于等于编辑器高度,则设置无效)
    tableDragable {Boolean} true 表格是否可以拖拽
    disabledTableInTable {Boolean} true 禁止表格嵌套
    allowDivTransToP {Boolean} true 认会将外部进入的html数据中的Div标签转换成P标签,外部进入的数据包括粘贴和调用setContent接口进入编辑器的数据。如果设置成false将不在做这个转换。

3.可调用实例的.editor方法,传入调用的方法名和参数,触发事件,如:$editor.editor("isFocus")

事件列表:

方法签名 描述
ready(Function fn) 编辑器对外提供的监听ready事件的接口, 通过调用该方法,达到的效果与监听ready事件是一致的
destroy() 销毁编辑器实例,使用textarea代替
setHeight(Number number) 设置编辑器高度
getContent() 获取编辑器的内容
getContent(Function fn) 获取编辑器的内容。 可以通过参数定义编辑器内置的判空规则
getAllHtml() 取得完整的html代码,可以直接显示成完整的html文档
getPlainTxt() 得到编辑器的纯文本内容,但会保留段落格式
getContentTxt() 获取编辑器中的纯文本内容,没有段落格式
setContent(String html) 设置编辑器的内容,可修改编辑器当前的html内容
setContent(String html, Boolean isAppendTo) 设置编辑器的内容,可修改编辑器当前的html内容
focus() 让编辑器获得焦点,默认focus到编辑器头部
focus(Boolean toEnd) 让编辑器获得焦点,toEnd确定focus位置
execCommand(String cmdName)(具体可使用的命令见下表) 执行编辑命令cmdName,完成富文本编辑效果
queryCommandState(String cmdName) 根据传入的command命令,查选编辑器当前的选区,返回命令的状态
hasContents() 检查编辑区域中是否有内容
hasContents(Array tags) 检查编辑区域中是否有内容,若包含参数tags中的节点类型,直接返回true
reset() 重置编辑器,可用来做多个tab使用同一个编辑器实例
setEnabled() 设置当前编辑区域可以编辑
setDisabled() 设置当前编辑区域不可编辑
setDisabled(String except) 设置当前编辑区域不可编辑,except中的命令除外
setDisabled(Array except) 设置当前编辑区域不可编辑,except中的命令除外
setShow() 显示编辑器
setHide() 隐藏编辑器
getContentLength() 计算编辑器html内容字符串的长度
getContentLength(Boolean ingoneHtml) 计算编辑器当前纯文本内容的长度

4.execCommand可调用的COMMAND列表,如:$editor.editor("execCommand", 'insertHtml', value)

# 命令 描述
1 anchor 插入锚点
2 autosubmit 提交表单
3 autotypeset 对当前编辑器的内容执行自动排版, 排版的行为根据config配置文件里的“autotypeset”选项进行控制。
4 bold 字体加粗
5 italic 字体倾斜
6 blockquote 添加引用
7 cleardoc 清空文档
8 touppercase 把选区内文本变大写,与“tolowercase”命令互斥
9 tolowercase 把选区内文本变小写,与“touppercase”命令互斥
10 directionality 文字输入方向
11 forecolor 字体颜色
12 backcolor 字体背景颜色
13 fontsize 字体大小
14 fontfamily 字体样式
15 underline 字体下划线,与删除线互斥
16 strikethrough 字体删除线,与下划线互斥
17 fontborder 字体边框
18 formatmatch 格式刷
19 horizontal 插入分割线
20 insertimage 图片对齐方式
21 insertimage 插入图片
22 indent 缩进
23 insertparagraph 插入段落
24 justify 段落对齐方式
25 lineheight 行距
26 link 插入超链接
27 unlink 取消超链接
28 insertimage 图片对齐方式
29 removeformat 清除文字样式
30 selectall 选中所有内容
31 time 插入时间,默认格式:12:59:59
32 date 插入日期,默认格式:2013-08-30
33 undo 撤销上一次执行的命令
34 redo 重做上一次执行的命令
35 inserthtml 插入html代码
36 insertorderedlist 有序列表,与“insertunorderedlist”命令互斥
37 insertunorderedlist 无序列表,与“insertorderedlist”命令互斥

定制工具栏

实例化编辑器的时候传入 toolbars 参数

1.简单列表

2.多行列表


              

1.配置项里用竖线 '|' 代表分割线

2.完整的按钮列表

'fullscreen' 全屏
'source' 源代码
'undo' 撤销
'redo' 重做
'bold' 加粗
'italic' 斜体
'underline' 下划线
'strikethrough' 删除线
'customstyle' 自定义标题
'paragraph' 段落格式
'fontfamily' 字体
'fontsize' 字号
'forecolor' 字体颜色
'backgroundcolor' 背景色
'insertorderedlist' 有序列表
'insertunorderedlist' 无序列表
'directionalityltr' 从左向右输入
'directionalityrtl' 从右向左输入
'indent' 首行缩进
'justifyleft' 居左对齐
'justifycenter' 居中对齐
'justifyright' 居右对齐
'justifyjustify' 两端对齐
'link' 超链接
'unlink' 取消链接
'anchor' 锚点
'insertimage' 多图上传
'emotion' 表情
'inserttable' 插入表格
'deletetable' 删除表格
'insertparagraphbeforetable' 表格前插入行
'insertrow' 前插入行
'deleterow' 删除行
'insertcol' 插入列
'deletecol' 删除列
'mergecells' 合并多个单元格
'mergeright' 右合并单元格
'mergedown' 下合并单元格
'splittocells' 完全拆分单元格
'splittorows' 拆分成行
'splittocols' 拆分成列

comments powered byDisqus