---
title: "Ext.form.field.HtmlEditor"
description: "xtype 为 htmleditor 的 Ext JS 原生组件参考。"
---

> Documentation Index
> Fetch the complete documentation index at: https://ag.879818327.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# Ext.form.field.HtmlEditor

源码定义：`ext-all-debug.js:108435`。分类：表单与字段。

## 创建示例

```javascript
var component = Ext.create("Ext.form.field.HtmlEditor", {
  xtype: "htmleditor",
  activated: false,
  allowDomMove: true,
  autoCreate: "示例值",
  buttonTips: {,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `activated` | `Boolean` | `false` | 控制是否启用 `activated` 行为。 | `activated: false` |
| `allowDomMove` | `Boolean` | `-` | 控制是否启用 `allowDomMove` 行为。 | `allowDomMove: true` |
| `autoCreate` | `String` | `-` | 配置组件的 `autoCreate` 选项。 | `autoCreate: "示例值"` |
| `buttonTips` | `Object` | `{` | 配置组件的 `buttonTips` 选项。 | `buttonTips: {` |
| `clearInvalid` | `Mixed` | `Ext.emptyFn` | 配置组件的 `clearInvalid` 选项。 | `clearInvalid: Ext.emptyFn` |
| `componentLayout` | `String` | `'htmleditor'` | 组件采用的内部布局策略。 | `componentLayout: 'htmleditor'` |
| `componentTpl` | `Array` | `[` | 配置生成组件内容的 `componentTpl` 模板。 | `componentTpl: [` |
| `containerElCls` | `Mixed` | `Ext.baseCSSPrefix + 'html-editor-container'` | 配置 `containerElCls` 对应的 CSS 类名。 | `containerElCls: Ext.baseCSSPrefix + 'html-editor-container'` |
| `createLinkText` | `String` | `'Please enter the URL for the link:'` | 配置组件的 `createLinkText` 选项。 | `createLinkText: 'Please enter the URL for the link:'` |
| `defaultLinkValue` | `String` | `'http:/'+'/'` | 配置组件的 `defaultLinkValue` 选项。 | `defaultLinkValue: 'http:/'+'/'` |
| `defaultValue` | `Mixed` | `(Ext.isOpera \|\| Ext.isIE6) ? ' ' : '&#82...` | 配置组件的 `defaultValue` 选项。 | `defaultValue: (Ext.isOpera \|\| Ext.isIE6) ? ' ' : '&#82...` |
| `enableAlignments` | `Boolean` | `true` | 控制是否启用 `enableAlignments` 行为。 | `enableAlignments: true` |
| `enableColors` | `Boolean` | `true` | 控制是否启用 `enableColors` 行为。 | `enableColors: true` |
| `enableFont` | `Boolean` | `true` | 控制是否启用 `enableFont` 行为。 | `enableFont: true` |
| `enableFontSize` | `Boolean` | `true` | 控制是否启用 `enableFontSize` 行为。 | `enableFontSize: true` |
| `enableFormat` | `Boolean` | `true` | 控制是否启用 `enableFormat` 行为。 | `enableFormat: true` |
| `enableLinks` | `Boolean` | `true` | 控制是否启用 `enableLinks` 行为。 | `enableLinks: true` |
| `enableLists` | `Boolean` | `true` | 控制是否启用 `enableLists` 行为。 | `enableLists: true` |
| `enableSourceEdit` | `Boolean` | `true` | 控制是否启用 `enableSourceEdit` 行为。 | `enableSourceEdit: true` |
| `extraFieldBodyCls` | `Mixed` | `Ext.baseCSSPrefix + 'html-editor-wrap'` | 配置 `extraFieldBodyCls` 对应的 CSS 类名。 | `extraFieldBodyCls: Ext.baseCSSPrefix + 'html-editor-wrap'` |
| `fieldCls` | `String` | `-` | 配置 `fieldCls` 对应的 CSS 类名。 | `fieldCls: "示例值"` |
| `focusCls` | `String` | `-` | 配置 `focusCls` 对应的 CSS 类名。 | `focusCls: "示例值"` |
| `fontFamilies` | `Array` | `[` | 配置组件的 `fontFamilies` 选项。 | `fontFamilies: [` |
| `hideMode` | `String` | `'offsets'` | 配置组件的 `hideMode` 选项。 | `hideMode: 'offsets'` |
| `iframePad` | `Number` | `3` | 配置组件的 `iframePad` 选项。 | `iframePad: 3` |
| `initialized` | `Boolean` | `false` | 控制是否启用 `initialized` 行为。 | `initialized: false` |
| `inputType` | `String` | `-` | 配置组件的 `inputType` 选项。 | `inputType: "示例值"` |
| `invalidCls` | `String` | `-` | 配置 `invalidCls` 对应的 CSS 类名。 | `invalidCls: "示例值"` |
| `invalidText` | `String` | `-` | 配置组件的 `invalidText` 选项。 | `invalidText: "示例值"` |
| `maskOnDisable` | `Boolean` | `true` | 控制是否启用 `maskOnDisable` 行为。 | `maskOnDisable: true` |
| `readOnly` | `String` | `-` | 控制字段是否只读。 | `readOnly: "示例值"` |
| `reStripQuotes` | `Mixed` | `/^['"]*\|['"]*$/g` | 配置组件的 `reStripQuotes` 选项。 | `reStripQuotes: /^['"]*\|['"]*$/g` |
| `sourceEditMode` | `Boolean` | `false` | 控制是否启用 `sourceEditMode` 行为。 | `sourceEditMode: false` |
| `stretchInputElFixed` | `Boolean` | `true` | 控制是否启用 `stretchInputElFixed` 行为。 | `stretchInputElFixed: true` |
| `subTplInsertions` | `Array` | `[` | 配置组件的 `subTplInsertions` 选项。 | `subTplInsertions: [` |
| `tabIndex` | `String` | `-` | 配置组件的 `tabIndex` 选项。 | `tabIndex: "示例值"` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `items`、`layout` 状态。源码涉及 `addEvents()`、`createToolbar()`、`createInputCmp()`、`callParent()`。 | `component.initComponent()` |
| `createInputCmp` | `` | 创建 `inputCmp`。 执行时会更新 `inputCmp` 状态。源码涉及 `getInputCmpCfg()`。 | `component.createInputCmp()` |
| `getInputCmpCfg` | `` | 读取并返回 `inputCmpCfg`。源码涉及 `getInsertionRenderData()`、`getTpl()`。 | `component.getInputCmpCfg()` |
| `createToolbar` | `` | 创建 `toolbar`。 执行时会更新 `toolbar` 状态。源码涉及 `getToolbarCfg()`。 | `component.createToolbar()` |
| `getToolbarCfg` | `` | 读取并返回 `toolbarCfg`。 执行时会更新 `fontSelect` 状态。源码涉及 `relayCmd()`、`deferFocus()`、`up()`、`execCmd()`。 | `component.getToolbarCfg()` |
| `getMaskTarget` | `` | 读取并返回 `maskTarget`。 | `component.getMaskTarget()` |
| `setReadOnly` | `readOnly` | 设置 `readOnly`。 执行时会更新 `readOnly` 状态。源码涉及 `getEditorBody()`、`setDesignMode()`、`disableItems()`。 | `component.setReadOnly(...)` |
| `getDocMarkup` | `` | 读取并返回 `docMarkup`。 | `component.getDocMarkup()` |
| `getEditorBody` | `` | 读取并返回 `editorBody`。源码涉及 `getDoc()`。 | `component.getEditorBody()` |
| `getDoc` | `` | 读取并返回 `doc`。源码涉及 `getWin()`。 | `component.getDoc()` |
| `getWin` | `` | 读取并返回 `win`。 | `component.getWin()` |
| `initDefaultFont` | `` | 初始化 `defaultFont`。 执行时会更新 `defaultFont` 状态。源码涉及 `down()`。 | `component.initDefaultFont()` |
| `isEqual` | `value1, value2` | 判断 `equal` 状态。源码涉及 `isEqualAsString()`。 | `component.isEqual(...)` |
| `afterRender` | `` | 生成 `after` 的渲染结果。 执行时会保留父类默认行为、更新 `iframeEl`、`textareaEl` 状态。源码涉及 `callParent()`、`initDefaultFont()`。 | `component.afterRender()` |
| `initFrameDoc` | `` | 初始化 `frameDoc`。 执行时会更新 `win` 状态。源码涉及 `getDoc()`、`getWin()`、`getDocMarkup()`、`setDesignMode()`。 | `component.initFrameDoc()` |
| `checkDesignMode` | `` | 处理 `checkDesignMode` 操作。源码涉及 `getDoc()`、`getDesignMode()`、`initFrameDoc()`。 | `component.checkDesignMode()` |
| `setDesignMode` | `mode` | 设置 `designMode`。源码涉及 `getDoc()`。 | `component.setDesignMode(...)` |
| `getDesignMode` | `` | 读取并返回 `designMode`。源码涉及 `getDoc()`。 | `component.getDesignMode()` |
| `disableItems` | `disabled` | 禁用 `items`。源码涉及 `getToolbar()`。 | `component.disableItems(...)` |
| `toggleSourceEdit` | `sourceEditMode` | 切换 `sourceEdit`。 执行时会派发 `editmodechange` 事件、刷新界面或布局、同步关联状态、更新 `sourceEditMode`、`inputEl` 状态。源码涉及 `getToolbar()`、`disableItems()`、`syncValue()`、`pushValue()`。 | `component.toggleSourceEdit(...)` |
| `createLink` | `` | 创建 `link`。源码涉及 `relayCmd()`。 | `component.createLink()` |
| `setValue` | `value` | 设置 `value`。源码涉及 `pushValue()`。 | `component.setValue(...)` |
| `cleanHtml` | `html` | 处理 `cleanHtml` 操作。 | `component.cleanHtml(...)` |
| `syncValue` | `` | 同步 `value`。 执行时会派发 `beforesync`、`sync` 事件。源码涉及 `getEditorBody()`、`cleanHtml()`、`fireEvent()`、`checkChange()`。 | `component.syncValue()` |
| `getValue` | `` | 读取并返回 `value`。 执行时会同步关联状态、更新 `value` 状态。源码涉及 `syncValue()`。 | `component.getValue()` |
| `pushValue` | `` | 写入 `value`。 执行时会派发 `beforepush`、`push` 事件。源码涉及 `fireEvent()`、`getEditorBody()`、`setDesignMode()`。 | `component.pushValue()` |
| `deferFocus` | `` | 处理 `deferFocus` 操作。源码涉及 `focus()`。 | `component.deferFocus()` |
| `getFocusEl` | `` | 读取并返回 `focusEl`。 | `component.getFocusEl()` |
| `focus` | `selectText, delay` | 将焦点移动到组件。 执行时会更新 `focusTask` 状态。源码涉及 `execCmd()`、`getFocusEl()`。 | `component.focus(...)` |
| `initEditor` | `` | 初始化 `editor`。 执行时会派发 `initialize` 事件、更新 `savedSelection`、`initialized` 状态。源码涉及 `getEditorBody()`、`getDoc()`、`pushValue()`、`setReadOnly()`。 | `component.initEditor()` |
| `beforeDestroy` | `` | 在 `destroy` 前执行预处理。 执行时会保留父类默认行为。源码涉及 `getDoc()`、`callParent()`。 | `component.beforeDestroy()` |
| `onRelayedEvent` | `event` | 处理 `relayedEvent` 回调。 | `component.onRelayedEvent(...)` |
| `onFirstFocus` | `` | 处理 `firstFocus` 回调。 执行时会派发 `activate` 事件、更新 `activated` 状态。源码涉及 `disableItems()`、`getValue()`、`getEditorBody()`、`deferFocus()`。 | `component.onFirstFocus()` |
| `adjustFont` | `btn` | 调整 `font`。源码涉及 `getDoc()`、`relayCmd()`。 | `component.adjustFont(...)` |
| `onEditorEvent` | `e` | 处理 `editorEvent` 回调。源码涉及 `updateToolbar()`。 | `component.onEditorEvent(...)` |
| `updateToolbar` | `` | 更新 `toolbar`。 执行时会同步关联状态。源码涉及 `onFirstFocus()`、`getToolbar()`、`getDoc()`、`syncValue()`。 | `component.updateToolbar()` |
| `relayBtnCmd` | `btn` | 转发 `btnCmd`。源码涉及 `relayCmd()`。 | `component.relayBtnCmd(...)` |
| `relayCmd` | `cmd, value` | 转发 `cmd`。源码涉及 `execCmd()`、`updateToolbar()`。 | `component.relayCmd(...)` |
| `execCmd` | `cmd, value` | 处理 `execCmd` 操作。 执行时会同步关联状态。源码涉及 `getDoc()`、`syncValue()`。 | `component.execCmd(...)` |
| `applyCommand` | `e` | 应用 `command`。源码涉及 `execCmd()`、`deferFocus()`。 | `component.applyCommand(...)` |
| `insertAtCursor` | `text` | 处理 `insertAtCursor` 操作。 执行时会同步关联状态。源码涉及 `getDoc()`、`syncValue()`、`deferFocus()`、`execCmd()`。 | `component.insertAtCursor(...)` |
| `focusOn` | `callback` | 将焦点移动到 `on`。源码涉及 `getDoc()`、`deferFocus()`、`execCmd()`。 | `component.focusOn(...)` |
| `getToolbar` | `` | 读取并返回 `toolbar`。 | `component.getToolbar()` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `activate` | Fires when the editor is first receives the focus. Any insertion must wait until after this event. | `listeners: { activate: function () {} }` |
| `beforepush` | Fires before the iframe editor is updated with content from the textarea. Return false to cancel the push. | `listeners: { beforepush: function () {} }` |
| `beforesync` | Fires before the textarea is updated with content from the editor iframe. Return false to cancel the sync. | `listeners: { beforesync: function () {} }` |
| `blur` | 组件失去焦点时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { blur: function () {} }` |
| `editmodechange` | Fires when the editor switches edit modes | `listeners: { editmodechange: function () {} }` |
| `focus` | 组件获得焦点时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { focus: function () {} }` |
| `initialize` | Fires when the editor is fully initialized (including the iframe) | `listeners: { initialize: function () {} }` |
| `push` | Fires when the iframe editor is updated with content from the textarea. | `listeners: { push: function () {} }` |
| `specialkey` | 组件获得特殊按键输入时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { specialkey: function () {} }` |
| `sync` | Fires when the textarea is updated with content from the editor iframe. | `listeners: { sync: function () {} }` |

Source: https://ag.879818327.xyz/ext/form/form-field-htmleditor/index.mdx