HtmlEditor

FineUI. HtmlEditor

new HtmlEditor(options)

Description:
  • 富文本编辑器控件。支持 umeditor / ueditor / ckeditor / tinymce 多种引擎切换。

    相关在线示例

Examples

创建富文本编辑器,默认使用 umeditor 引擎:

FineUI.create({
	type: 'HtmlEditor', renderTo: document.body, fieldLabel: '内容', width: 800, height: 400
});

使用editor切换引擎(umeditor/ueditor/ckeditor/tinymce):

FineUI.create({
	type: 'HtmlEditor', renderTo: document.body, fieldLabel: '内容', width: 800, height: 400,
	editor: 'ckeditor', editorToolbarSet: 'basic'
});

使用readonly: true设为只读模式:

FineUI.create({
	type: 'HtmlEditor', renderTo: document.body, fieldLabel: '只读内容', width: 800, height: 300,
	value: '<p>这是<strong>只读</strong>内容</p>', readonly: true
});
Parameters:
Name Type Description
options Object

初始参数

Properties
Name Type Default Description
editor string 'umeditor'

文本编辑器的类型(可选项为:umeditor, ueditor, ckeditor, tinymce)

editorToolbarSet string 'full'

文本编辑器的工具栏类型(可选项为:basic, full)

readonly boolean false

是否只读

type string 'HtmlEditor'

控件类型

Extends

Members

bodyEl :jQuery

Description:
  • 字段主体对应的jQuery节点对象

Inherited From:

字段主体对应的jQuery节点对象

Type:
  • jQuery

el :jQuery

Description:
  • 控件对应的jQuery节点对象

Inherited From:

控件对应的jQuery节点对象

Type:
  • jQuery

items :Object

Description:
  • 子控件列表

Inherited From:

子控件列表

Type:
  • Object

Methods

getEncodedText(text) → {string}

Description:
  • 获取编码后的字符串

Inherited From:
Parameters:
Name Type Description
text string

原始字符串

Returns:

编码后的字符串

Type
string

getFormFields() → {Array.<FineUI.Field>}

Description:
  • 获取容器内(深度遍历)所有表单字段实例(FineUI.Field的子类,如TextBox/NumberBox/DatePicker等)

Inherited From:
Example

遍历表单全部字段,序列化为 name → value 的对象(用于自定义 ajax 提交;字段未声明name时改用id):

var values = {};
FineUI.ui.form1.getFormFields().forEach(function (field) {
    values[field.name || field.id] = field.getValue();
});
// values 形如:{ tbxUserName: 'FineUIPro', numberAge: 30, ... }
Returns:

表单字段数组

Type
Array.<FineUI.Field>

getItem(value) → {FineUI.Component}

Description:
  • 获取子控件(按索引/标识符/匹配函数查找;通常配合items无显式 id 的场景,比按FineUI.ui[id]更精准)

Inherited From:
Examples

按索引取第一个子控件:

var firstChild = FineUI.ui.toolbar1.getItem(0);

按 id 取子控件:

var btn = FineUI.ui.toolbar1.getItem('btnSave');

按匹配函数找第一个匹配的子控件(函数对每项返回 true 即匹配):

var btn = FineUI.ui.toolbar1.getItem(function (item) {
    return item.type === 'Button' && item.text === '保存';
});
Parameters:
Name Type Description
value number | string | function

子控件索引、标识符或者匹配函数

Returns:

子控件实例

Type
FineUI.Component

hidePopEl()

Description:
  • 隐藏容器内的所有弹出框

Inherited From:

isType(value) → {boolean}

Description:
  • 检测当前实例是否指定的控件类型

Inherited From:
Example
grid1.isType('panel') // 返回true
grid1.isType('grid')  // 返回true
Parameters:
Name Type Description
value Object

控件类型

Returns:

如果当前实例是指定的控件类型,返回true;否则返回false

Type
boolean

Events

beforehide

Description:
  • 隐藏控件之前触发(返回false则取消隐藏操作)

Inherited From:

beforeshow

Description:
  • 显示控件之前触发(返回false则取消显示操作)

Inherited From:

hide

Description:
  • 隐藏控件时触发

Inherited From:

layout

Description:
  • 布局控件时触发

Inherited From:

remove

Description:
  • 移除控件时触发(调用 remove() 时,控件 DOM 被销毁之前触发;可用于清理外部资源 / 解绑全局事件)

Inherited From:

render

Description:
  • 渲染控件时触发

Inherited From:

show

Description:
  • 显示控件时触发

Inherited From: