Editor

编辑器.
KISSY.use('editor',function(S,Editor){
    // use Editor
});

Note

使用 getData/setData 设置编辑器对象的数据,使用 data 配置设置初始数据

Class

Class Detail

class editor.Editor
Editor (config)
xclass: ‘editor’
  • 继承自 Control , 包含其全部配置,属性,方法,事件.
Parameters:config (Object) – 配置项.

Note

从已有元素实例 Editor 对象时:

  1. 元素节点标明类名 {prefixCls}editor .
  2. textarea 节点标明类名 ks-editor-textarea .
  3. prefixCls 为配置的类名前缀,默认为 ks- .

Configs Detail

Editor.config.data

{String} - 初始化设置编辑器里的内容

Editor.config.mode

编辑器模式.取值 Editor.SOURCE_MODEEditor.WYSIWYG_MODE .

{String[]} - 自定义样式表 url 数组.

Editor.config.textareaAttrs

{Object} - optional. 自定义 textarea 节点的属性

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

new Editor({
    textareaAttrs: {
        name : 'MyTextarea'
    }
});
Editor.config.attachForm

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

Editor.config.customStyle

{String} - 自定义样式字符串.

Attributes Detail

Editor.SOURCE_MODE

{KISSY.Node} - 编辑器源码模式. <static>

Editor.WYSIWYG_MODE

{KISSY.Node} - 编辑器可视化模式. <static>

Editor.prototype.textarea

{KISSY.Node} - 编辑器的 textarea.只读.

Editor.prototype.iframe

{KISSY.Node} - 编辑器的 iframe.只读.

Editor.prototype.window

{KISSY.Node} - 编辑器 iframe 的 window.只读.

Editor.prototype.document

{KISSY.Node} - 编辑器 iframe 的 document.只读.

Editor.prototype.iframeWrapEl

{KISSY.Node} - 编辑器 iframe 的父节点.只读.

Editor.prototype.toolBarEl

{KISSY.Node} - 编辑器的 toolbar 节点.只读.

Editor.prototype.statusBarEl

{KISSY.Node} - 编辑器的 statusbar 节点.只读.

Editor.prototype.mode

{KISSY.Node} - 编辑器模式.可读写.取值 Editor.SOURCE_MODEEditor.WYSIWYG_MODE .

Editor.prototype.data

{KISSY.Node} - 编辑器 body 下的 html 内容.可读写.

Methods Detail

Editor.prototype.execCommand()
execCommand(commandName, arg1, arg2, ...)
调用编辑器的响应命令功能
Parameters:
  • commandName (String) – 命令名称,由各个插件提供
  • arg1 – 对应命令所需要的参数
Editor.prototype.hasCommand()
hasCommand(commandName)
编辑器是否存在该命令
Parameters:commandName (String) – 命令名称,由各个插件提供
Editor.prototype.queryCommandValue()
queryCommandValue(commandName)
查询该命令对应的当前编辑值
Parameters:commandName (String) – 命令名称,由各个插件提供
Editor.prototype.sync()
sync()
同步编辑器内容到对应的 textarea
Editor.prototype.getDocHtml()
getDocHtml()
获取编辑器文档的完整 html(不仅仅是 body 内的内容)
Editor.prototype.focus()
focus()
使得编辑器获得焦点
Editor.prototype.blur()
blur()
使得编辑器失去焦点
Editor.prototype.addCustomStyle()
addCustomStyle(cssText, [id])
添加自定义样式到编辑器文档中
Parameters:
  • cssText (String) – 自定义样式文本
  • id (String) – 产生的 style 标签 id,用于删除
Editor.prototype.removeCustomStyle()
removeCustomStyle( id )
删除编辑器文档的自定义样式
Parameters:id (String) – 自定义样式产生的 style 标签的 id
addCustomLink( url )
添加自定义样式表到编辑器文档中
Parameters:url (String) – 自定义样式表的地址
removeCustomLink( url )
删除编辑器文档的自定义样式表
Parameters:url (String) – 自定义样式表的地址
Editor.prototype.docReady()
docReady( fn )
注册函数到编辑器文档 ready 队列(编辑器文档 ready 后触发)
Parameters:fn (Function) – 编辑器文档 ready 后触发

Note

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

Editor.prototype.insertElement()
insertElement( element )
往编辑器中插入元素
Parameters:element (KISSY.Node) – 待插入的元素节点。(需从编辑器文档中创建)

Note

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

editor.focus();
setTimeout(function(){
    editor.insertElement(new KISSY.Node('<span>haha</span>'),
    null,editor.get('document')[0]);
},50);
Editor.prototype.insertHtml()
insertHtml( html )
往编辑器中插入 html 串
Parameters:html (String) – 待插入的 html 字符串.

Note

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

editor.focus();
setTimeout(function(){
    editor.insertHtml('<span>haha</span>');
},50);
Editor.prototype.sync()
sync()
同步编辑器内容到对应的 textarea
Editor.prototype.addSelect()
addSelect(id, cfg)
为编辑器工具栏增加一个下拉菜单按钮. 一般用于插件编写.
Parameters:
  • id (String) – 按钮 id
  • cfg (Object) – select 配置,详见 Select

例如:

editor.addSelect("plugin2", {
    children:[
        {
            content:"1",
            value:"11"
        },
        {
            content:"2",
            value:"22"
        }
    ],
    listeners:{
        click:function () {
            alert('i am running')
        }
    }
});
Editor.prototype.getSelectedHtml()
getSelectedHtml()
获取选中的html字符串
Return String:要获取的html
Editor.prototype.getData()
getData()
获得编辑器里面的内容
Return String:编辑器里的html内容
Editor.prototype.getFormatData()
getFormatData()
获得编辑器里面格式化后的内容
Return String:编辑器里格式化后的 html
Editor.prototype.setData()
setData( data )
设置编辑器里的内容
Parameters:data (String) – 要设置的内容

Events Detail

Editor.Events.paste()
paste(e)
当用户黏贴文本触发,可返回值用来修改用户的黏贴内容
Parameters:e.html – 用户的黏贴内容
Editor.Events.focus()
wysiwygMode(e)
当编辑区域获得焦点时触发
Editor.Events.blur()
wysiwygMode(e)
当编辑区域失去焦点时触发
Editor.Events.wysiwygMode()
wysiwygMode(e)
当切换到可视化模式后触发
Editor.Events.sourceMode()
sourceMode(e)
当切换到源码模式后触发
Editor.Events.selectionChange()
selectionChange(e)
当用户光标路径变化后触发
Parameters:
  • selection ({Editor.Selection}) – 当前的选区对象
  • path ({Editor.ElementPath}) – 当前的光标路径
  • element ({KISSY.Node}) – 光标开始处所在的非文字节点元素.
Editor.Events.dialogShow()
dialogShow(e)
当弹出插件窗口事触发
Parameters:
  • dialog ({Overlay.Dialog}) – 窗口对象实例
  • dialogName ({String}) – 窗口标志名称