您当前位置:首页 > 文章中心 > HTML5+CSS3 > kendo UI

kendoUI系列教程之Editor编辑器

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2013-11-26   阅读次数: 3975   查看权限: 游客查看

kendoUI系列教程,kendoUI中文教程,kendoUI中文API说明文档之Editor编辑器。

kendoui的编辑器是我见过配置最复杂的,方法API一大堆。

Configuration配置项

1、编码 encoded
类型:Boolean
默认:true
说明:配置编辑器提交时是否对内容编码,默认是编码。
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  value: "<p>foo</p>",
  encoded: false
});
console.log($("#editor").val()); // 返回 "<p>foo</p>"
</script>
1、按钮提示信息 massages
类型:Object
说明:配置编辑器鼠标经过按钮时提示的信息内容,等于语言包功能。
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  messages: {
    bold: "Bold",
    italic: "Italic",
    underline: "Underline",
    strikethrough: "Strikethrough",
    superscript: "Superscript",
    subscript: "Subscript",
    justifyCenter: "Center text",
    justifyLeft: "Align text left",
    justifyRight: "Align text right",
    justifyFull: "Justify",
    insertUnorderedList: "Insert unordered list",
    insertOrderedList: "Insert ordered list",
    indent: "Indent",
    outdent: "Outdent",
    createLink: "Insert hyperlink",
    unlink: "Remove hyperlink",
    insertImage: "Insert image",
    insertHtml: "Insert HTML",
    fontName: "Select font family",
    fontNameInherit: "(inherited font)",
    fontSize: "Select font size",
    fontSizeInherit: "(inherited size)",
    formatBlock: "Format",
    formatting: "Format",
    style: "Styles",
    emptyFolder: "Empty Folder",
    uploadFile: "Upload",
    orderBy: "Arrange by:",
    orderBySize: "Size",
    orderByName: "Name",
    invalidFileType: "The selected file \"{0}\" is not valid. Supported file types are {1}.",
    deleteFile: "Are you sure you want to delete \"{0}\"?",
    overwriteFile: "A file with name \"{0}\" already exists in the current directory. Do you want to overwrite it?",
    directoryNotFound: "A directory with this name was not found.",
    imageWebAddress: "Web address",
    imageAltText: "Alternate text",
    linkWebAddress: "Web address",
    linkText: "Text",
    linkToolTip: "ToolTip",
    linkOpenInNewWindow: "Open link in new window",
    dialogInsert: "Insert",
    dialogUpdate: "Update",
    dialogButtonSeparator: "or",
    dialogCancel: "Cancel"
  }
});
</script>
3、样式表 stylesheet
类型:Array
说明:允许自定义一些样式用于编辑器内来渲染你需要的标签。
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  stylesheets: [
    "base.css",
    "theme.css"
  ]
});
</script>
4、工具 tools
类型:Array
说明:用于编辑器的工具,可以自定义指定名称,但必须定义成对象。

以下是可用的编辑器命令

  • 基本文本格式 - bolditalicunderlinestrikethroughsubscriptsuperscript
  • 字体和颜色 - fontNamefontSizeforeColorbackColor
  • 对齐方式 - justifyLeftjustifyCenterjustifyRightjustifyFull
  • 列表 - insertUnorderedListinsertOrderedListindentoutdent
  • 链接和图片 - createLinkunlinkinsertImage
  • 表格编辑 - createTableaddColumnLeftaddColumnRightaddRowAboveaddRowBelowdeleteRowdeleteColumn
  • 格式化 - formatting
  • 代码片断 - insertHtml
  • 查看源码 - viewHtml
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  tools: [
    "bold", "italic", "underline"
  ]
});
</script>
5、工具名称 tools.name
类型:String
说明:定义一个对象工具时名称是必须的,但不要与现有的工具名称重复,如"undo","redo"之类的。
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  tools: [
    { name: "custom" }
  ]
});
</script>
6、工具提示信息 tools.tooltip
类型:String
说明:当鼠标经过此工具按钮时提示的信息。
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  tools: [
    { name: "bold", tooltip: "Bold the selected text" }
  ]
});
</script>
7、执行函数 tools.exec
类型:Function
说明:当占击此工具按钮时执行的javascript函数。
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  tools: [
    {
      name: "custom",
      exec: function(e) {
        var editor = $(this).data("kendoEditor");
        // ...
      }
    }
  ]
});
</script>
8、按钮下拉项 tools.items
类型:Array
说明:比如字体、字体大小一样显示下拉列表的选项。
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  tools: [
    {
      name: "fontName",
      items: [
        { text: "Arial/Verdana", value: "Arial,Verdana,sans-serif" }
      ]
    }
  ]
});
</script>
9、按钮下拉项文本 tools.items.text 及下拉值 tools.items.value
类型:String
说明:下拉列表选项的文本与对应值。
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  tools: [
    {
      name: "fontName",
      items: [
        { text: "Default site font", value: "Arial,Verdana,sans-serif" },
        { text: "Monospaced font", value: "monospace" }
      ]
    }
  ]
});
</script>
10、应用环境 tools.items.context
类型:String
说明:仅应用于格式化工具,指定可用的环境。
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  tools: [
    {
      name: "formatting",
      items: [
        { text: "Title", value: "h1" },
        // 只有选择了h1才可应用与显示
        { text: "Note", value: "span.note", context: "h1" }
      ]
    }
  ]
});
</script>
11、工具模板 tools.template
类型:String
说明:应用于指定按钮的html模板。
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  tools: [
    {
      name: "custom",
      template: "<button class='k-button'>Save draft</button>"
    }
  ]
});
</script>
12、图片浏览 imageBrowser
类型:Object
说明:配置图片浏览对话框
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    transport: {
      read: "imagebrowser/read",
      destroy: "imagebrowser/destroy",
      create: "imagebrowser/createDirectory",
      uploadUrl: "imagebrowser/upload",
      thumbnailUrl: "imagebrowser/thumbnail"
      imageUrl: "/content/images/{0}",
    },
    path: "/myInitialPath/"
  }
});
</script>
13、图片浏览类型 imageBrowser.fileTypes
类型:String
默认:.png,.gif,.jpg,.jpeg
说明:指定允许图片的后缀名
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    fileTypes: "*.gif"
  }
});
</script>
14、图片浏览路径 imageBrowser.path
类型:String
默认:
说明:指定图片浏览的路径,默认是网站根目录
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    path: "/uploads/"
  }
});
</script>
15、图片运输配置 imageBrowser.transport
类型:Object
说明:配置图片加载或者保存的数据
16、图片数据读取路径 imageBrowser.transport.read
类型:Object | String
说明:浏览图片数据的地址,此数据是通过jQuery.ajax发送过来
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    transport: {
      read: "/imagebrowser/read"
    }
  }
});
</script>
17、图片数据读取类型 imageBrowser.transport.read.contentType

类型: String
默认:application/x-www-form-urlencoded
说明:指定请求服务器返回的数据格式,此参数会发送到服务器

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    transport: {
      read: {
        contentType: "application/json" //表示返回json数据
      }
    }
  }
});
</script>
18、图片读取的数据 imageBrowser.transport.read.data

类型: String|Object|Function
说明:这个data数据会发到服务器。简单理解就是帐号用户识别,如果是多用户后台将会很有用。

<script>
    $("#editor").kendoEditor({
        imageBrowser: {
            transport: {
                read: {
                    //data: {id: 42,name: "John Doe"}
                    data: function() {return { id: 42, name: "John Doe" }}
                }
            }
        }
    });
</script>
19、图片数据读取数据格式 imageBrowser.transport.read.dataType

类型: String|Object|Function
说明:要求服务器返回的数据类型,常用的值是“json”和“jsonp”。

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    transport: {
      read: {
        dataType: "json"
      }
    }
  }
});
</script>
20、图片数据读取方式 imageBrowser.transport.read.type

类型: String
说明:请求数据的方式可选"POST", "GET", "PUT" or "DELETE",默认是"GET"

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    transport: {
      read: {
        type: "POST"
      }
    }
  }
});
</script>
21、图片数据读取地址 imageBrowser.transport.read.url

类型: String|Function
说明:请求数据的地址

<textarea id="editor"></textarea>
<script>
    $("#editor").kendoEditor({
        imageBrowser: {
            transport: {
                read: {
                    //url: "/read"
                    url: function(params) {
                        return "/read?t=" + new Date().getTime();
                    }
                }
            }
        }
    });
</script>
22、浏览缩略图地址 imageBrowser.transport.thumbnailUrl

类型: String|Function
说明:浏览服务器缩略图片的地址,如果没有指定将不显示对应的按钮,如果指定必须要返回有名称与图片地址。

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    transport: {
      thumbnailUrl: "/thumbnail"
    }
  }
});
</script>
23、上传图片地址 imageBrowser.transport.uploadUrl

类型: String
说明:处理上传图片的地址,如果没指定将不显示上传按钮

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    transport: {
      uploadUrl: "/thumbnail"
    }
  }
});
</script>
25、原始图片地址 imageBrowser.transport.imageUrl

类型: String|Function

说明:负责处理原始图片的地址,必须指定文件名的占位符{0}
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    transport: {
      imageUrl: "/content/images/{0}" //{0}将会被文件名替换
    }
  }
});
</script>
26、删除图片地址 imageBrowser.transport.destroy

类型: String|Function

说明:负责处理删除图片的地址,没有指定将不显示删除按钮。删除数据以jQuery.ajax发送
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    transport: {
      destroy: "/destroy"
    }
  }
});
</script>
25、图片删除数据类型 imageBrowser.transport.destroy.contentType

类型: String
默认:application/x-www-form-urlencoded
说明:指定请求服务器返回的数据格式,此参数会发送到服务器

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    transport: {
      destroy: {
        contentType: "application/json" //表示返回json数据
      }
    }
  }
});
</script>
26、图片删除数据 imageBrowser.transport.destroy.data

类型: String|Object|Function
说明:这个data数据会发到服务器。简单理解就是帐号用户识别,如果是多用户后台将会很有用。

<script>
    $("#editor").kendoEditor({
        imageBrowser: {
            transport: {
                destroy: {
                    //data: {id: 42,name: "John Doe"}
                    data: function() {return { id: 42, name: "John Doe" }}
                }
            }
        }
    });
</script>
27、图片删除数据格式 imageBrowser.transport.destroy.dataType

类型: String|Object|Function
说明:要求服务器返回的数据类型,常用的值是“json”和“jsonp”。

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    transport: {
      destroy: {
        dataType: "json"
      }
    }
  }
});
</script>
28、图片删除数据发送方式 imageBrowser.transport.destroy.type

类型: String
说明:支持的参数有"POST", "GET", "PUT" 和 "DELETE",默认是"GET"

<textarea id="editor"></textarea>
<script>
    $("#editor").kendoEditor({
        imageBrowser: {
            transport: {
                destroy: {
                    type: "POST"
                }
            }
        }
    });
</script>
29、图片删除数据地址 imageBrowser.transport.destroy.url

类型: String
说明:处理删除图片的url

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    transport: {
      destroy: {
	//url: "/destroy"
        url: function(params) {
          return "/destroy?t=" + new Date().getTime();
        }
      }
    }
  }
});
</script>
30、生成文件夹配置 imageBrowser.transport.create

类型: String|Object
说明:生成文件夹的url或者选项,如果没指定将不显示生成文件夹按钮。注意生成过程是以jQuery.ajax传输数据。

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    transport: {
      create: "/create"
    }
  }
});
</script>
31、生成文件夹数据类型 imageBrowser.transport.create.contentType

类型: String
默认:application/x-www-form-urlencoded
说明:指定请求服务器返回的数据格式,此参数会发送到服务器

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    transport: {
      create: {
        contentType: "application/json" //表示返回json数据
      }
    }
  }
});
</script>
32、生成文件夹数据 imageBrowser.transport.create.data

类型: String|Object|Function
说明:这个data数据会发到服务器。简单理解就是帐号用户识别,如果是多用户后台将会很有用。

<script>
    $("#editor").kendoEditor({
        imageBrowser: {
            transport: {
                create: {
                    //data: {id: 42,name: "John Doe"}
                    data: function() {return { id: 42, name: "John Doe" }}
                }
            }
        }
    });
</script>
33、生成文件夹数据格式 imageBrowser.transport.create.dataType

类型: String|Object|Function
说明:要求服务器返回的数据类型,常用的值是“json”和“jsonp”。

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    transport: {
      create: {
        dataType: "json"
      }
    }
  }
});
</script>
34、生成文件夹数据发送方式 imageBrowser.transport.create.type

类型: String
说明:支持的参数有"POST", "GET", "PUT" 和 "DELETE",默认是"GET"

<textarea id="editor"></textarea>
<script>
    $("#editor").kendoEditor({
        imageBrowser: {
            transport: {
                create: {
                    type: "POST"
                }
            }
        }
    });
</script>
35、生成文件夹地址 imageBrowser.transport.create.url

类型: String
说明:处理生成文件夹的url地址

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    transport: {
      create: {
	//url: "/create"
        url: function(params) {
          return "/create?t=" + new Date().getTime();
        }
      }
    }
  }
});
</script>
36、设置上传模式 imageBrowser.schema 类型:Object
Set the object responsible for describing the image raw data format.设置描述图像原始数据格式的对象。查看kendo.imagebrowser.min.js源码可以见到:
schemas:{imagebrowser:{data:function(e){return e.items||e||[]},model:{id:"name",fields:{name:"name",size:"size",type:"type"}}}}
37、上传模式模型 imageBrowser.schema.model 类型:Object
说明:Set the object which describes the image/directory entry fields. Note that a name, type and size fields should be set.设置描述图像或目录输入字段的对象。请注意,名称、类型和大小字段必须设置。
38、上传模型ID imageBrowser.schema.model.id 类型:String
说明:The name of the field which acts as an identifier.作标识符的字段名
39、上传模型的字段imageBrowser.schema.model.fields 类型:Object
40、上传模型字段名称imageBrowser.schema.model.fields.name 类型:Object|String
说明:The field which contains the name of the image/directory此字段包含图像和目录的名称
41、上传模型字段名称域imageBrowser.schema.model.fields.name.field  类型:String
说明:The name of the field.域名称
42、名称解析器imageBrowser.schema.model.fields.name.parse 类型:Function
说明:Specifies the function which will parse the field value. If not set default parsers will be used.解析字段值函数,如果没有设置将使用默认解析器。
43、字段类型imageBrowser.schema.model.fields.type 类型:Object|String
说明:The field which contains the type of the entry. Either f for image or d for directory.指定字段类型:f表示图片,d表示文件夹。
44、类型解析器imageBrowser.schema.model.fields.type.parse 类型:Function
说明:Specifies the function which will parse the field value. If not set default parsers will be used.解析类型的函数,如果没有设置将使用默认解析器。
45、类型字段imageBrowser.schema.model.fields.type.field 类型:String
说明:The name of the field.类型字段名称
46、尺寸字段imageBrowser.schema.model.fields.size 类型:Object|String
说明:The field which contains the size of image.包含图片尺寸的字段
47、尺寸字段哉imageBrowser.schema.model.fields.size.field 类型:String
说明:The name of the field.
48、尺寸解析器imageBrowser.schema.model.fields.size.parse 类型:Function
说明:Specifies the function which will parse the field value. If not set default parsers will be used.解析尺寸的函数,如果没有设置将使用默认解析器。
49、图片浏览信息imageBrowser.messages 类型:Object
说明:Defines texts shown within the image browser.定义图片浏览文本
50、上传按钮文本 imageBrowser.messages.uploadFile
类型:String
默认:Upload
说明:设定上传按钮的文本
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    messages: {
      uploadFile: "上传图片"
    }
  }
});
</script>
51、图片排序规则 imageBrowser.messages.orderBy
类型:String
默认:Arrange by
说明:定义图片排序标签
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    messages: {
      orderBy: "Order by"
    }
  }
});
</script>
52、图片名称排序文本 imageBrowser.messages.orderByName
类型:String
默认:Name
说明:定义名称排序下拉列表文本。
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    messages: {
      orderByName: "Filename"
    }
  }
});
</script>
53、图片尺寸排序文本 imageBrowser.messages.orderBySize
类型:String
默认:Size
说明:定义尺寸排序下拉列表文本。
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    messages: {
      orderBySize: "File size"
    }
  }
});
</script>
54、文件夹不存在提示文本 imageBrowser.messages.directoryNotFound
类型:String
默认:A directory with this name was not found.
说明:定义文件夹找不到时的错误提示信息文本。
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    messages: {
      directoryNotFound: "Directory not found!"
    }
  }
});
</script>
55、空文件夹提示文本 imageBrowser.messages.emptyFolder
类型:String
默认:Empty Folder
说明:定义空文件夹的提示信息文本。
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    messages: {
      emptyFolder: "Folder is empty"
    }
  }
});
</script>
56、删除文件时的提醒文本 imageBrowser.messages.deleteFile
类型:String
默认:Are you sure you want to delete {0}?
说明:定义删除文件或者文件夹时的提醒信息文本。
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    messages: {
      deleteFile: "确实要删除? 删除后不可恢复!"
    }
  }
});
</script>
57、上传无效文件类型提示 imageBrowser.messages.invalidFileType
类型:String
默认:The selected file '{0}' is not valid. Supported file types are {1}.
说明:定义上传不支持的文件类型时提示信息
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    messages: {
      invalidFileType: "Supported file types are {1}. Please retry your upload."
      invalidFileType: "可上传的文件类型有{1}. 请重新上传."
    }
  }
});
</script>
57、覆盖上传文件提醒 imageBrowser.messages.overwriteFile 
类型:String
默认:A file with name '{0}' already exists in the current directory. Do you want to overwrite it?
说明:上传重复文件时的提醒信息
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    messages: {
      overwriteFile: "Do you want to overwrite the file with name '{0}'?"
    }
  }
});
</script>
58、搜索默认文本 imageBrowser.messages.search
类型:String
默认:Search
说明:定义搜索框点位符文本
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    messages: {
      search: "Find"
    }
  }
});
</script>
59、编辑器区域 body
类型:Element
说明:代表编辑器内容区的html节点
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor();
var editor = $("#editor").data("kendoEditor");
editor.body.style.backgroundColor = "#f00";
</script>
60、初始化默认工具defaultTools
类型:Array
说明:用于初始化默认工具的数组,注意编辑器生成后定义的数组将无效。
<textarea id="editor"></textarea>
<script>
var defaultTools = kendo.ui.Editor.defaultTools;
//Shift + 回车插入段落,回车插入换行
defaultTools["insertLineBreak"].options.shift = false;
defaultTools["insertParagraph"].options.shift = true;
$("#editor").kendoEditor();
</script>

Events 事件

<textarea id="editor"></textarea>
<div id="words"></div>
<script>
function wordCount(value) {
  return $.trim(value.replace(/<.*?>/g, " "))
    .replace(/['";:,.?\-!]+/g, '')
    .match(/\S+/g).length;//统计长度
}
$("#editor").kendoEditor({
  change: function() {
    console.log(this.value());//内容变化时触发
  },
  execute: function(e) {
    console.log("executing command", e.name, e.value);//编辑器命令执行时触发
  },
  keydown: function(e) {
    console.log("keydown : keyCode=",e.keyCode);//键盘按下时触发,如果按住不放将多次触发
  },
  keyup: function(e) {
    $("#words").text(wordCount(this.value()) + " words");//键盘松开时触发
  },
  paste: function(e) {
    console.log(e.html);//粘贴前触发
  },
  select: function(e) { //选择了内容时触发
  }
});
</script>
快捷键
序号 快捷键 作用
1 Tab 使后一个工具获取焦点。
2 Shift + Tab 使前一个工具获取焦点。

 

关键词: kendoui,html5,editor   编辑时间: 2013-11-29 15:11:40

  • 感到高兴

    1

    高兴
  • 感到支持

    1

    支持
  • 感到搞笑

    1

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
33.33%(2)
66.67%(4)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介
  • QQ登录网站实战教程