Show: Inherited Protected Private Deprecated

Editor Class

Extends Component.Control

Module: editor

富文本编辑器

Note1

editor拥有各种常用的编辑器插件 —— editor-plugins ，KISSY@5.0+将 KISSY Editor 核心代码和 KISSY 代码放在一起，而 editor-plugins 则放在 gallery 上。插件的相关资料请查看 editor-plugins教程

Constructor

`Editor`

(

config

)

Parameters:

config Object

Example:

require(['node','editor,'kg/editor-plugins/1.1.2/font-size','kg/editor-plugins/1.1.2/source-area','kg/editor-plugins/1.1.2/image'], function(Node, Editor, FontSize, SourceArea, Image){
    var myEditor = new Editor({
        focused : true,
        attachForm : true,
        render : '#editorContainer',
        width : '500px',
        height : '500px',
        plugins : [
            FontSize,
            SourceArea,
            new Image({
                upload : {
                    serverUrl: 'http://youurl.php',
                    serverParams: {
                        waterMark: function () {
                            return Node.one("#ke_img_up_watermark_1")[0].checked;
                        }
                    },
                    suffix: "png,jpg,jpeg,gif",
                    fileInput: "Filedata",
                    sizeLimit: 1000, //k
                    extraHTML: "<p style='margin-top:10px;'><input type='checkbox' id='ke_img_up_watermark_1' checked='checked'> 图片加水印，防止别人盗用</p>"
                }
            })
        ]
    });
})

Index
Methods
Attributes
Events

Item Index

Methods

`addAttr`

(

name
attrConfig

)

Inherited from Attribute

给宿主对象增加一个属性

Parameters:

name String

属性名
attrConfig Object

属性配置信息, 支持下面的配置项:
- value String | Number
  
  属性默认值。注意默认值请不要设置为复杂对象（通过自定义构造器 new 出来的），复杂对象可设置 valueFn 返回.如果配置项中没有设置 value, 会调用 valueFn 函数获取默认值并赋给 value
- valueFn Function
  
  提供属性默认值的函数，传入对象内部对应的属性值和属性名，取该函数的返回值作为最终值给用户
- setter Function
  
  写属性时的处理函数，传入从 set() 参数得到的属性值和属性名，如果返回非 undefined 则作为新的属性设置值
- getter Function
  
  读属性时的处理函数
- validator Function
  
  写属性时的验证函数，传入从 set() 参数得到的属性值和属性名，返回 false 则不改变该属性值

`addAttrs`

(

attrConfigs
values

)

Inherited from Attribute

批量添加属性

Parameters:

attrConfigs Object

属性名/配置信息对
values Object

属性名/值对, 批量设置当前对象的属性值

`addCustomLink`

(

url

)

添加自定义样式表到编辑器文档中

Parameters:

url String

自定义样式表的地址

`addCustomStyle`

(

cssText
id

)

添加自定义样式到编辑器文档中

Parameters:

cssText String

自定义样式文本
id String

产生的 style 标签 id，用于删除

`addSelect`

(

id
cfg

)

为编辑器工具栏增加一个下拉菜单按钮. 一般用于插件编写.

Parameters:

id String

按钮 id
cfg Object

select配置，详见Select

Example:

editor.addSelect("plugin2", {
    children:[
        {
            content:"1",
            value:"11"
        },
        {
            content:"2",
            value:"22"
        }
    ],
    listeners:{
        click:function () {
            alert('i am running')
        }
    }
});

`addTarget`

(

target

)

Inherited from CustomEvent.Target

添加冒泡事件源对象

Parameters:

target Object

事件往上冒泡的事件源

Example:

require(['util', 'event/custom'], function(Util, CustomEvent) {
    function Custom(id){
        this.id = id;
        this.publish("run",{
            bubbles:1
        });
    }

    Util.augment(Custom, CustomEvent.Target);

    var c1 = new Custom("c1");

    var c2 = new Custom("c1");

    c1.addTarget(c2);

    c2.on("run",function(e){
        S.log(e.target.id +" fires event run"); // => c1 fires event run
    });

    c1.fire("run");
});

`blur`

()

Inherited from Component.Control but overwritten by this Class

使得编辑器失去焦点

`callSuper`

()

Inherited from Base

调用父类的对应方法，如果没有，则返回undefined

Example:

require(['base'], function(Base) {
    var A = Base.extend({
        m: function (value) {
            return 'am:' + value;
        },
        m2: function (value) {
            return 'am2:' + value;
        }
    });

    var B = A.extend({
        m: function(value) {
            return 'bm:(' + this.callSuper(value) + ')';
        },
        m2: function(value) {
            return 'bm2(' + this.callSuper.apply(this, arguments) + ')';
        }
    });

    var b = new B();
    console.log(b.m(1));
    console.log(b.m2(2));
});

`create`

()

Inherited from Component.Control

创建当前组件的DOM结构，control将会代理给render

Returns:

自身

`decorate`

(

textarea
cfg

)

static

从已有的textarea元素生成editor

Parameters:

textarea String | HTMLElement

已有的textarea元素
cfg Object

编辑器的配置对象，配置键值意义和Editor构造器的一样

Example:

require(['editor'], function(Editor){
    var myEditorFromTextarea = Editor.decorate('#my-textarea',{
        focused : true,
        attachForm: true
    })
})

`destroy`

()

Inherited from Base

销毁实例

`detach`

(

eventType
fn
[scope]

)

Inherited from CustomEvent.Target

解除绑定的事件处理器

Parameters:

eventType String | Object
fn Function

当事件触发时的回调函数
[scope] Object optional

回调函数的 this 值. 如果不指定默认为绑定事件的当前元素

`docReady`

(

fn

)

注册函数到编辑器文档 ready 队列（编辑器文档 ready 后触发）

该函数在编辑器生存周期内可能会运行多次（每次切换源码模式再切换回可视化模式都会因为编辑器文档重建而触发）

Parameters:

fn Function

编辑器文档 ready 后触发

`execCommand`

(

commandName
arg1

)

调用编辑器的响应命令功能

Parameters:

commandName String

命令名称，由各个插件提供
arg1 Object

对应命令所需要的参数

`extend`

(

[extensions]
methodDesc
staticAttributes
desc

)

Inherited from Base

从当前类上扩展出一个子类

Parameters:

[extensions] Function[] optional

扩展类数组
methodDesc Object

方法集合键值对
staticAttributes Object

放到新产生组件类上的静态属性集合键值对，其中 ATTRS 属性特殊对待
desc Object

类元信息
- name String
  
  类名

`fire`

(

type
eventData

)

Boolean

Inherited from CustomEvent.Target

触发绑定 type 类型的事件处理器, 并给触发的事件处理器的事件对象参数中混入数据 eventData

Parameters:

type String

要触发的自定义事件名称
eventData Object

要混入触发事件对象的数据对象

Returns:

Boolean:

如果其中一个事件处理器返回 false , 则返回 false, 否则返回最后一个事件处理器的返回值

`focus`

()

Inherited from Component.Control but overwritten by this Class

使得编辑器获得焦点

`get`

(

name

)

Inherited from Attribute

获取属性 name 的值

Parameters:

name String

属性名.也可以为 “x.y” 形式. 此时要求 x 属性为包含 y 属性的普通 Object.当没有设置属性值时, 会取该属性的默认值

`getAttrVals`

() Object

Inherited from Attribute

获取目前实例的所有属性键值对集合

Returns:

Object:

属性键值对集合

`getData`

(

format
mode

)

String

获得编辑器里面的内容

Parameters:

format Boolean

是否格式化，内部使用
mode Object

模式，内部使用

Returns:

String:

编辑器里的html内容

`getDocHtml`

()

获取编辑器文档的完整 html（不仅仅是 body 内的内容）

`getPlugin`

(

id

)

Inherited from Base

根据指定的 id 获取对应的plugin实例

Parameters:

id String

plugin实例的id

Returns:

对应的plugin实例

Example:

dialog.getPlugin('component/plugin/drag')
   .getPlugin('dd/plugin/constrain')
   .set('constrain', false);

`getSelectedHtml`

() String

获取选中的html字符串

Returns:

String:

要获取的html

`hasAttr`

(

name

)

Boolean

Inherited from Attribute

判断是否有名为 name 的属性

Parameters:

name String

属性名

Returns:

Boolean:

`hasCommand`

(

commandName

)

编辑器是否存在该命令

Parameters:

commandName String

命令名称，由各个插件提供

`hide`

()

Inherited from Component.Control

隐藏组件

Returns:

自身

`insertElement`

(

element

)

往编辑器中插入元素

Parameters:

element KISSY.Node
待插入的元素节点。（需从编辑器文档中创建）

如果要兼容 firefox 浏览器，需要调用 focus 后延迟 50ms 调用该函数：
```
editor.focus();
setTimeout(function(){
    editor.insertElement(new KISSY.Node('<span>haha</span>'),
    null,editor.get('document')[0]);
},50);
```

`insertHtml`

(

html

)

往编辑器中插入 html 串

Parameters:

html String
待插入的 html 字符串.

如果要兼容 firefox 浏览器，需要调用 focus 后延迟 50ms 调用该函数：
```
editor.focus();
setTimeout(function(){
    editor.insertHtml('<span>haha</span>');
},50);
```

`move`

(

)

Inherited from Component.Control

移动到(x,y)

Parameters:

x Number

横轴位置
y Number

纵轴位置

Returns:

自身

`on`

(

eventType
fn
[scope]

)

Inherited from CustomEvent.Target

为相应事件添加事件处理器

Parameters:

eventType String | Object
- 当为String时包含一个或多个事件名称的字符串, 多个事件名以空格分开。事件可以通过加点来表示分组，例如 "click.one" , "click.two"
- 当为Object时，类似这样：
```
{
  'click':{
      fn:function(){
      },
      filter: '' // delegate,
      once:true // 绑定一次
  },
  'mouseenter':function(){}
}
```
fn Function

当事件触发时的回调函数
[scope] Object optional

回调函数的 this 值. 如果不指定默认为绑定事件的当前元素

`plug`

(

plugin

)

Inherited from Base

安装指定插件

Parameters:

plugin Function | Object

指定的插件构造器或者插件对象

Returns:

自身

Example:

require(['overlay', 'component/plugin/resize'],function(Overlay,Resize){
    new Overlay({
        content:'test'
    }).plug(new Resize({
        handlers:['t','t']
    }));
});

`publish`

(

type
cfg

)

Inherited from CustomEvent.Target

配置自定义事件的一些特有信息

Parameters:

type String

要触发的自定义事件名称
cfg Object

事件的具体配置对象
- [bubbles=true] Boolean optional
  
  类型 boolean. 是否支持冒泡。默认 true
- [defaultFn] Function optional

`queryCommandValue`

(

commandName

)

查询该命令对应的当前编辑值

Parameters:

commandName String

命令名称，由各个插件提供

`removeAttr`

(

name

)

Inherited from Attribute

删除名为 name 的属性

Parameters:

name String

属性名

`removeCustomLink`

(

url

)

删除编辑器文档的自定义样式表

Parameters:

url String

自定义样式表的地址

`removeCustomStyle`

(

id

)

删除编辑器文档的自定义样式

Parameters:

id String

自定义样式产生的 style 标签的 id

`removeTarget`

(

target

)

Inherited from CustomEvent.Target

删除冒泡事件源对象

Parameters:

target Object

事件往上冒泡的事件源

`render`

()

Inherited from Component.Control

把当前组件的DOM结构放入 DOM 文档中，并绑定事件，同步属性

Returns:

自身

`reset`

(

name
opts

)

Inherited from Attribute but overwritten by this Class

重置属性 name 为初始值. (调用一次 set() )

Parameters:

name String

属性
opts Object

控制对象，包括以下控制选项
- silent=false Boolean
  
  默认 false , 是否触发 change 系列事件

`set`

(

name
value
opts

)

Boolean

Inherited from Attribute

设置属性 name 的值为 value

Parameters:

name String

属性名.也可以为 “x.y” 形式，此时要求 x 属性为包含 y 属性的普通 Object，这时会设置 x 属性值的 y 属性.但只会触发 x 的相关 change 事件
value String

属性的值
opts Object

控制对象，包括以下控制选项
- silent=false Boolean
  
  默认 false , 是否触发 change 系列事件
- error Function
  
  验证失败的回调，包括失败原因
- force Function
  
  是否强制触发 change 事件，默认值为 false，当值发生变化时才触发

Returns:

Boolean:

该次属性设置是否生效（是否通过了 validator 验证）

`setData`

(

data

)

设置编辑器里的内容

Parameters:

data String

要设置的内容

`show`

()

Inherited from Component.Control

显示组件

Returns:

自身

`sync`

()

Inherited from Component.Control but overwritten by this Class

同步编辑器内容到对应的 textarea

`unplug`

(

plugin

)

Inherited from Base

卸载指定插件

Parameters:

plugin Function | Object

指定的插件构造器或者插件对象

Returns:

自身

Example:

require(['overlay','component/plugin/resize'],function(Overlay,Resize){
    var o= new Overlay({
        content:'test'
    }).plug(new Resize({
        handlers:['t','t']
    }));

    o.unplug('component/plugin/resize'); // 卸载 resize 插件
});

Attributes

`active`

Boolean

Inherited from Component.Control

组件是否已经激活

`attachForm`

默认 false. 是否监控编辑器输入框所在的 form 提交。（ form 提交前自动将编辑内容同步到对应 textarea 中）

Default: false

`content`

String | KISSY.Node

Inherited from Component.Control

设置的 content 属性

`created`

Boolean

Inherited from Component.Control

只读属性，组件结构是否已经创建

`customLink`

String[]

自定义样式表 url 数组

`customStyle`

String

自定义样式字符串

`data`

String

初始化设置编辑器里的内容

`disabled`

Boolean

Inherited from Component.Control

该组件是否禁用状态

`document`

KISSY.Node

编辑器 iframe 的 document.只读.

`el`

KISSY.Node

Inherited from Component.Control

只读属性，该组件的根节点. 注意调用 render() 后才可以取得

`elAttrs`

Object

Inherited from Component.Control

可选，附加给组件根节点的属性键值对

`elBefore`

KISSY.Node

Inherited from Component.Control

可选，组件根节点的渲染到该节点之前

`elCls`

String

Inherited from Component.Control

可选，附加给组件根节点的样式类

`elStyle`

Object

Inherited from Component.Control

可选，附加给组件根节点的内联样式

`focused`

Boolean

Inherited from Component.Control

可选，该组件是否初始获得焦点

`formatData`

KISSY.Node

编辑器 body 下的格式化后的 html 内容.可读写

`height`

Number

Inherited from Component.Control but overwritten by this Class

可选，组件的高度，单位像素

`highlighted`

Boolean

Inherited from Component.Control

该组件是否处于高亮状态

`iframe`

KISSY.Node

编辑器的 iframe.只读

`iframeWrapEl`

KISSY.Node

编辑器 iframe 的父节点.只读

`isControl`

Boolean

Inherited from Component.Control

标记当前实例是 Control 的实例

`listeners`

Object

Inherited from Base

配置组件的事件绑定,例如:

{
    listeners:{
        customEvent:function(e){
            alert(e.type); // => "customEvent"
        }
    }
}

or

{
    listeners:{
        customEvent:{
            fn:function(e){
                // e.type // => customEvent
                // this.xx => 1
            },
            context:{xx:1}
        }
    }
}

`mode`

String

编辑器模式.取值 Editor.SOURCE_MODE 或 Editor.WYSIWYG_MODE

`parent`

Control

Inherited from Component.Control

可选，该组件的父组件

`plugins`

Function[] | Object[]

Inherited from Base

插件构造器数组或插件对象数组. 例如

{
    plugins: [ Plugin1,Plugin2 ]
}

// or

{
    plugins: [new Plugin1(cfg),new Plugin2(cfg)]
}

`prefixCls`

String

Inherited from Component.Control

可选，默认 “ks-” . 组件的 css 样式类前缀 . 例如假设组件为 menu ，则该组件内的样式类名为 {prefixCls}menu，默认为 “ks-menu”.可用于实现自定义皮肤

`prefixXClass`

String

Inherited from Component.Control

可选，组件 prefix 的超类。只在config中使用。当超类未被指定时，用这个做超类

`render`

KISSY.Node

Inherited from Component.Control

组件要应用的节点。默认 S.all(“body”)，组件根节点的渲染为该节点最后一个节点

`rendered`

Boolean

Inherited from Component.Control

只读属性，组件是否已经渲染

`SOURCE_MODE`

KISSY.Node

编辑器源码模式

`srcNode`

KISSY.Node

Inherited from Component.Control

可选，组件从页面中已存在的该节点中渲染而来.srcNode 时设置其他属性不起作用，属性通通在 html 标签中指定，并且 html 标签必须包含完整结构，例如 content 节点必须存在

`statusBarEl`

KISSY.Node

编辑器的 statusbar 节点.只读.

`textareaAttrs`

Objec optional

自定义textarea的属性。

例如可以指定全新产生 editor 所属 textarea 的 name 值

new Editor({
    textareaAttrs: {
        name : 'myTextarea'
    }
});

`toolBarEl`

KISSY.Node

编辑器的 toolbar 节点.只读.

`visible`

Inherited from Component.Control

默认 true ，是否显示.只是为组件的根节点添加/删除 {prefix}{component}-hidden 形式的 css class，自行指定具体的 css 样式

Default: true

`width`

Number

Inherited from Component.Control

可选，组件的宽度，单位像素

`window`

KISSY.Node

编辑器 iframe 的 window.只读.

`WYSIWYG_MODE`

KISSY.Node

编辑器可视化模式

`x`

Number

Inherited from Component.Control

横轴位置

`xy`

Number[]

Inherited from Component.Control

横纵轴位置

`y`

Number

Inherited from Component.Control

纵轴位置

`zIndex`

Number

Inherited from Component.Control

z-index 值

Events

`*Change`

Inherited from Attribute

每调用 set() 一次后就触发一次该事件

Event Payload:

e Object

回调函数传入的对象
- newVal
  
  本次 set 导致的属性当前值集合
- prevVal
  
  本次 set 导致的属性在 set 前的值集合
- attrName String
  
  本次 set 导致改变的属性名集合
- subAttrName String
  
  本次 set 导致的属性全名集合

`afterAttrNameChange`

Inherited from Attribute

名为 “attrName” 的属性, 在改变它的值之后触发该事件

Event Payload:

e Object

回调函数传入的对象
- newVal
  
  当前的属性值
- prevVal
  
  当前改变前的属性值
- attrName String
  
  当前的属性名，例如 “x”
- subAttrName String
  
  当前的完整属性名，例如 “x.y”

`afterBindUI`

Inherited from Component.Control

当组件内部事件绑定完之后触发

Event Payload:

e Object

KISSY CustomEvent 对象

`afterCreateDom`

Inherited from Component.Control

当组件根节点创建的时候触发

Event Payload:

e Object

KISSY CustomEvent 对象

`afterRenderUI`

Inherited from Component.Control

当组件根节点渲染到 DOM 文档后触发

Event Payload:

e Object

KISSY CustomEvent 对象

`afterSyncUI`

Inherited from Component.Control

当组件内部的状态同步完之后触发

Event Payload:

e Object

KISSY CustomEvent 对象

`beforeAttrNameChange`

Inherited from Attribute

名为 “attrName” 的属性, 在改变它的值之前触发该事件

Event Payload:

e Object

回调函数传入的对象
- newVal
  
  将要改变到的属性值
- prevVal
  
  当前的属性值
- attrName String
  
  当前的属性名，例如 “x”
- subAttrName String
  
  当前的完整属性名，例如 “x.y”

`beforeBindUI`

Inherited from Component.Control

在组件内部事件绑定前触发

Event Payload:

e Object

KISSY CustomEvent 对象

`beforeCreateDom`

Inherited from Component.Control

在组件根节点创建前触发

Event Payload:

e Object

KISSY CustomEvent 对象

`beforeRenderUI`

Inherited from Component.Control

在组件根节点渲染之前触发

Event Payload:

e Object

KISSY CustomEvent 对象

`beforeSyncUI`

Inherited from Component.Control

在同步组件内部状态前触发

Event Payload:

e Object

KISSY CustomEvent 对象

`beforeVisibleChange`

Inherited from Component.Control

在组件 visible 属性发生变化时触发

Event Payload:

e Object

KISSY CustomEvent 对象

`blur`

当编辑区域失去焦点时触发

`dialogShow`

当弹出插件窗口事触发

Event Payload:

e.dialog Overlay.Dialog

窗口对象实例
e.dialogName String

窗口标志名称

`focus`

当编辑区域获得焦点时触发

`hide`

Inherited from Component.Control

在组件 hide 的时候触发

Event Payload:

e Object

KISSY CustomEvent 对象

`paste`

当用户黏贴文本触发，可返回值用来修改用户的黏贴内容

Event Payload:

e.html String

用户的黏贴内容

`selectionChange`

当用户光标路径变化后触发

Event Payload:

e.selection Editor.Selection

当前的选区对象
e.path Editor.ElementPath

当前的光标路径
e.element KISSY.Node

光标开始处所在的非文字节点元素

`show`

Inherited from Component.Control

在组件 show 的时候触发

Event Payload:

e Object

KISSY CustomEvent 对象

`sourceMode`

当切换到源码模式后触发

`wysiwygMode`

当切换到可视化模式后触发

APIs

Editor Class

Note1

Constructor

Editor

Parameters:

Example:

Item Index

Methods

Attributes

Events

Methods

addAttr

Parameters:

addAttrs

Parameters:

addCustomLink

Parameters:

addCustomStyle

Parameters:

addSelect

Parameters:

Example:

addTarget

Parameters:

Example:

blur

callSuper

Example:

create

Returns:

decorate

Parameters:

Example:

destroy

detach

Parameters:

docReady

该函数在编辑器生存周期内可能会运行多次（每次切换源码模式再切换回可视化模式都会因为编辑器文档重建而触发）

Parameters:

execCommand

Parameters:

extend

Parameters:

fire

Parameters:

Returns:

focus

get

Parameters:

getAttrVals

Returns:

getData

Parameters:

Returns:

getDocHtml

getPlugin

Parameters:

Returns:

Example:

getSelectedHtml

Returns:

hasAttr

Parameters:

Returns:

hasCommand

Parameters:

hide

Returns:

insertElement

Parameters:

如果要兼容 firefox 浏览器，需要调用 focus 后延迟 50ms 调用该函数：

insertHtml

Parameters:

如果要兼容 firefox 浏览器，需要调用 focus 后延迟 50ms 调用该函数：

move

Parameters:

Returns:

on

Parameters:

`Editor`

`addAttr`

`addAttrs`

`addCustomLink`

`addCustomStyle`

`addSelect`

`addTarget`

`blur`

`callSuper`

`create`

`decorate`

`destroy`

`detach`

`docReady`

`execCommand`

`extend`

`fire`

`focus`

`get`

`getAttrVals`

`getData`

`getDocHtml`

`getPlugin`

`getSelectedHtml`

`hasAttr`

`hasCommand`

`hide`

`insertElement`

`insertHtml`

`move`

`on`

`plug`

`publish`

`queryCommandValue`

`removeAttr`

`removeCustomLink`

`removeCustomStyle`

`removeTarget`

`render`

`reset`

`set`

`setData`

`show`

`sync`

`unplug`

`active`

`attachForm`

`content`

`created`

`customLink`

`customStyle`

`data`

`disabled`

`document`

`el`

`elAttrs`

`elBefore`

`elCls`

`elStyle`

`focused`

`formatData`

`height`

`highlighted`

`iframe`

`iframeWrapEl`

`isControl`

`listeners`

`mode`

`parent`

`plugins`

`prefixCls`

`prefixXClass`

`render`

`rendered`

`SOURCE_MODE`

`srcNode`

`statusBarEl`

`textareaAttrs`

`toolBarEl`

`visible`