开发者文档
富文本编辑器集成自百度的UEditor编辑器，地址：UEditor
使用富文本编辑器必须要将SUI版本升级到 1.2.0 版本以上。
富文本编辑器还处在测试阶段，上传图片目前只支持URL上传，我们后续会逐渐完善更多功能。有任何问题或者建议可以随时反馈给我们。
注意，使用富文本编辑器必须额外引入如下三个文件:
- http://g.alicdn.com/sj/sui-editor/0.0.2/sui-editor.config.js
- http://g.alicdn.com/sj/sui-editor/0.0.2/editor/js/sui-editor.js
- http://g.alicdn.com/sj/sui-editor/0.0.2/editor/css/sui-editor.css
初始化
完整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' | 拆分成列 |