插件配置

config.pluginConfig:

类型为各个插件的具体配置, 配置形式为:

{
        "插件名":插件配置
}

包括以下插件配置:

超链接配置, 目前包括

link.target

默认为 “”, 表示在当前窗口打开新链接, 也可以指定 “_blank” , 则可以在新窗口打开链接. 例如

pluginConfig : {
    link:{
        target:"_blank"
    }
}
pluginConfig.image.remote

图片配置,如果设为 false ,则图片弹层中网络图片 tab 消失

pluginConfig.image.defaultMargin

图片间距,默认为 10

pluginConfig.image.upload

上传图片配置, 不需要上传功能可不配置, 包括以下子配置

upload.serverUrl

接受文件数据的服务器端程序地址, 格式为 multipart/form-data , 返回格式为:

upload.serverParams

类型object, 键值对. 传给服务器的格外参数, 如果 value 是函数则传递函数执行结果

upload.suffix

类型字符串, 允许图片的后缀名

upload.fileInput

类型字符串, 传给服务器的文件域名

upload.sizeLimit

类型整数, 限制上传的文件大小, 单位 KB, ie 下只能作为提示.

upload.extraHtml

放入图片上传区域的其他 html

例如:

pluginConfig: {
    // 图片插件配置
    "image": {
        //上传图片配置, 不需要上传功能可不配置
        upload: {
            //返回格式
            //正确:{"imgUrl":"http://xx.com/yy.jpg"}
            //错误:{"error":"i am error!"}
            //接受图片的服务器
            //发送一个文件过去, 格式为 multipart/form-data
            serverUrl: "/code/upload/upload.jsp",
            //传给服务器的格外参数, 是函数则传递函数执行结果
            serverParams: {
                yy: function () {
                    return "xx";
                }
            },
            //后缀名白名单
            suffix: "png,jpg,jpeg,gif",
            // 传递给server的文件域名字
            fileInput: "Filedata",
            //限制上传的文件大小, 单位KB,
            //无法客户端限制, 只能作为提示信息
            sizeLimit: 1000,
            //k
            //自己想要添加的其他输入域
            extraHtml: "<p style='margin-top:5px;'>" + "<input type='checkbox' name='ke_img_up_watermark_1'> 图片加水印, 防止别人盗用</p>"
        }
    }
}

Note

如果页面中设置了 document.domain=’xx.com’, 那么这时上传图片服务器要返回一段设置 domain 的 html, 例如

<html>
    <head>
        <script>
            document.domain="xx.com";
        </script>
    </head>
    <body>
        {"imgUrl":"http://img03.taobaocdn.com/sns_album/i3/T13fhRXftcXXb1upjX.jpg"}
    </body>
</html>
pluginConfig.templates

模板 (templates) 配置, 类型数组, 数组每个元素为单个模板的配置, 单个配置包括

templates.demo

类型字符串, 模板的简单介绍

templates.html

类型字符串, 将要插入到编辑器区域的具体内容

例如:

{
    "templates": [{
        //显示模板的简单介绍
        demo: "模板1效果演示html",
        //插入到编辑器区域的具体内容
        html: "<div style='border:1px solid red'>模板1效果演示html</div><p></p>"
    },
    {
        demo: "模板2效果演示html",
        html: "<div style='border:1px solid red'>模板2效果演示html</div>"
    }],
}
pluginConfig.font-size

字体大小配置, 类型 object 或 boolean. 当为 false 时, 则该按钮不出现在编辑器中. 当为 object 时, 包含子配置

font-size.items

类型对象数组, 数组每一项的配置为:

items.value

类型 string, 真实的字体大小

items.attrs

类型 object, 键值对添加到每个字体的对应节点上

items.name

类型 string, 字体大小的显示值

例如:

{
    "font-size": {
        //字体大小下拉框的配置
        items: [{
            //真实的字体大小值
            value: "14px",
            //字体大小选项框样式, 可不配置
            attrs: {
                style: 'position: relative; border: 1px solid #DDDDDD; margin: 2px; padding: 2px;'
            },
            //单个字体大小的显示值
            name: " <span style='font-size:14px'>标准</span>" + "<span style='position:absolute;top:1px;right:3px;'>14px</span>"
        }]
    }

}
pluginConfig.font-family

字体种类配置, 类型 object, 包含子配置项

font-family.items

类型对象数组, 字体种类配置, 单个配置包含

items.name

字体显示值

items.value

设置到编辑元素的真实值

例如:

{
    "font-family": {
        items: [{
            //显示值
            name: "宋体",
            //真实值
            value: "SimSun"
        },
        {
            name: "黑体",
            value: "SimHei"
        }]
    }
}
pluginConfig.font-bold

是否显示粗体按钮, 默认 true

pluginConfig.font-italic

是否显示斜体按钮, 默认 true

pluginConfig.font-underline

是否显示下划线按钮, 默认 true

pluginConfig.font-strikeThrough

是否显示删除线按钮, 默认 true

pluginConfig.draft

草稿箱

例如

{
    "draft": {

        // 当前编辑器的历史是否要单独保存到一个键值而不是所有编辑器公用
        // saveKey: "taoba",

        // 分钟设置:每隔几分钟保存一次
        interval: 5,

        // 最多保存几条历史记录?
        limit: 10,

        // 草稿箱帮助文案, 可不设置
        helpHtml: "<div " + "style='width:200px;'>" + "<div style='padding:5px;'>草稿箱能够自动保存您最新编辑的内容, " + "如果发现内容丢失, " + "请选择恢复编辑历史</div></div>"
    }
}
pluginConfig.resize

右下角调整大小的配置

例如

{
    "resize": {
        //只能在y轴拖放, [“x”,”y”]表示任意拖放
        direction: ["y"]
    }
}
pluginConfig.music

音乐插件配置, 支持音乐文件地址输入, 直接播放mp3

例如:

music: {
    //必须和网址url同域而不是类库同域
    musicPlayer: "/music/niftyplayer.swf"
}
pluginConfig.multi-upload

图片批量上传

例如

{
    "multi-upload": {
        //同图片上传插件配置
        //返回格式
        //正确:{"imgUrl":""}
        //错误:{"error":""}
        //注意:中文 \uxxxx 转义
        //发送一个文件过去, 格式为 multipart/form-data
        //接受图片的服务器, 注意必须绝对地址
        serverUrl: "http://xx.com/code/upload/upload.jsp",

        // 传递给 server 的文件域名字
        fileInput: "Filedata",

        //同图片配置
        serverParams: {
            waterMark: function () {
                return S.one("#ke_img_up_watermark_2")[0].checked;
            }
        },
        //同图片配置
        extraHtml: "<p style='margin-top:10px;'>" + "<input type='checkbox' " + "style='vertical-align:middle;margin:0 5px;' " + "id='ke_img_up_watermark_2'>" + "<span style='vertical-align:middle;'>图片加水印, 防止别人盗用</span></p>",
        //缩略图的后缀名
        //原图:http://xx.com/yy.jpg
        //则加入后缀名时变为:
        //http://xx.com/yy_80x80.jpg
        previewSuffix: "_80x80",

        //缩略图窗口宽度, 高度根据图片自适应
        //若不需要缩略图功能, 不配置即可
        previewWidth: "80px",

        //客户端 flash 验证
        sizeLimit: 1000 //k,
        //新增配置:可同时显示的图片列表个数
        numberLimit: 15
    }
}

Note

  1. 该插件使用 flash 技术, 必须在根域名下提供 crossdomain.xml, 例如 http://www.taobao.com/crossdomain.xml , 内容如下

    <cross-domain-policy>
        <allow-access-from domain="*.taobao.com"/>
        <allow-access-from domain="*.taobao.net"/>
        <allow-access-from domain="*.taobaocdn.com"/>
        <allow-access-from domain="*.tbcdn.cn"/>
        <allow-access-from domain="*.allyes.com"/>
    </cross-domain-policy>
    
  2. serverUrl 必须使用绝对地址, 否则如果编辑器组件和应用页面不在同一个hostname时, firefox下请求会发到编辑器组件所在的hostname.

  3. 多图上传在非 ie 下并不会携带 cookie,如确实需要可通过 serverParams 传递:

    serverParams: {
        cookie: function () {
            return document.cookie;
        }
    }
    
pluginConfig.video

国内视频插入, 可直接输入tudou,youku,ku6的url进行视频粘贴.

例如:

{
    "video": {
        urlCfg: [{
            reg: /tudou\.com/i,
            url: "http://bangpai.taobao.com/json/getTudouVideo.htm?" + "url=@url@&callback=@callback@"
        }],
        //输入框提示信息
        urlTip: "请输入优酷网、土豆网、酷7网的视频播放页链接...",
        //静态转换规则, 从用户输入转换为flash地址, 例如优酷:
        providers: [
            {
        reg:/youku\.com/i,
        width:480,
        height:400,
        detect: function (url) {
            var m = url.match(/id_([^.]+)\.html(\?[^?]+)?$/);
            if (m) {
                return "http://player.youku.com/player.php/sid/" + m[1] + "/v.swf";
            }
            m = url.match(/v_playlist\/([^.]+)\.html$/);
            if (m) {
                return;
                //return "http://player.youku.com/player.php/sid/" + m[1] + "/v.swf";
            }
            return url;
        }
    },
    {
        reg:/tudou\.com/i,
        width:480,
        height:400,
        detect:function(url) {
            return url;
        }
    },
    {
        reg:/ku6\.com/i,
        width:480,
        height:400,
        detect:function(url) {
            var m = url.match(/show[^\/]*\/([^\/]+)\.html(\?[^?]+)?$/);
            if (m) {
                return "http://player.ku6.com/refer/" + m[1] + "/v.swf";
            }
            return url;
        }
    }
        ]
    }
}
pluginConfig.xiami-music

虾米音乐插入, 无需配置, 只要 use 即可.

Note

xiami-music , video , multi-upload 为扩展插件, 若需要使用请引入外部js

<script src="http://a.tbcdn.cn/s/kissy/1.2.0/editor/biz/ext/editor-plugin-pkg-min.js"></script>