kendoui的编辑器是我见过配置最复杂的，方法API一大堆。
Configuration配置项
1、编码 encoded
类型：Boolean
默认：true
说明：配置编辑器提交时是否对内容编码，默认是编码。
$("#editor").kendoEditor({
value: "
foo
",encoded: false
});
console.log($("#editor").val()); // 返回 "
foo
"1、按钮提示信息 massages
类型：Object
说明：配置编辑器鼠标经过按钮时提示的信息内容，等于语言包功能。
$("#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"
}
});
3、样式表 stylesheet
类型：Array
说明：允许自定义一些样式用于编辑器内来渲染你需要的标签。
$("#editor").kendoEditor({
stylesheets: [
"base.css",
"theme.css"
]
});
4、工具 tools
类型：Array
说明：用于编辑器的工具，可以自定义指定名称，但必须定义成对象。
以下是可用的编辑器命令
基本文本格式 - bold, italic, underline, strikethrough, subscript, superscript
字体和颜色 - fontName, fontSize, foreColor, backColor
对齐方式 - justifyLeft, justifyCenter, justifyRight, justifyFull
列表 - insertUnorderedList, insertOrderedList, indent, outdent
链接和图片 - createLink, unlink, insertImage
表格编辑 - createTable, addColumnLeft, addColumnRight, addRowAbove, addRowBelow, deleteRow, deleteColumn
格式化 - formatting
代码片断 - insertHtml
查看源码 - viewHtml
$("#editor").kendoEditor({
tools: [
"bold", "italic", "underline"
]
});
5、工具名称 tools.name
类型：String
说明：定义一个对象工具时名称是必须的，但不要与现有的工具名称重复，如"undo"，"redo"之类的。
$("#editor").kendoEditor({
tools: [
{ name: "custom" }
]
});
6、工具提示信息 tools.tooltip
类型：String
说明：当鼠标经过此工具按钮时提示的信息。
$("#editor").kendoEditor({
tools: [
{ name: "bold", tooltip: "Bold the selected text" }
]
});
7、执行函数 tools.exec
类型：Function
说明：当占击此工具按钮时执行的javascript函数。
$("#editor").kendoEditor({
tools: [
{
name: "custom",
exec: function(e) {
var editor = $(this).data("kendoEditor");
// ...
}
}
]
});
8、按钮下拉项 tools.items
类型：Array
说明：比如字体、字体大小一样显示下拉列表的选项。
$("#editor").kendoEditor({
tools: [
{
name: "fontName",
items: [
{ text: "Arial/Verdana", value: "Arial,Verdana,sans-serif" }
]
}
]
});
9、按钮下拉项文本 tools.items.text 及下拉值 tools.items.value
类型：String
说明：下拉列表选项的文本与对应值。
$("#editor").kendoEditor({
tools: [
{
name: "fontName",
items: [
{ text: "Default site font", value: "Arial,Verdana,sans-serif" },
{ text: "Monospaced font", value: "monospace" }
]
}
]
});
10、应用环境 tools.items.context
类型：String
说明：仅应用于格式化工具，指定可用的环境。
$("#editor").kendoEditor({
tools: [
{
name: "formatting",
items: [
{ text: "Title", value: "h1" },
// 只有选择了h1才可应用与显示
{ text: "Note", value: "span.note", context: "h1" }
]
}
]
});
11、工具模板 tools.template
类型：String
说明：应用于指定按钮的html模板。
$("#editor").kendoEditor({
tools: [
{
name: "custom",
template: "Save draft"
}
]
});
12、图片浏览 imageBrowser
类型：Object
说明：配置图片浏览对话框
$("#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/"
}
});
13、图片浏览类型 imageBrowser.fileTypes
类型：String
默认：.png,.gif,.jpg,.jpeg
说明：指定允许图片的后缀名
$("#editor").kendoEditor({
imageBrowser: {
fileTypes: "*.gif"
}
});
14、图片浏览路径 imageBrowser.path
类型：String
默认：/
说明：指定图片浏览的路径，默认是网站根目录
$("#editor").kendoEditor({
imageBrowser: {
path: "/uploads/"
}
});
15、图片运输配置 imageBrowser.transport
类型：Object
说明：配置图片加载或者保存的数据
16、图片数据读取路径 imageBrowser.transport.read
类型：Object | String
说明：浏览图片数据的地址，此数据是通过jQuery.ajax发送过来
$("#editor").kendoEditor({
imageBrowser: {
transport: {
read: "/imagebrowser/read"
}
}
});
17、图片数据读取类型 imageBrowser.transport.read.contentType
类型： String
默认：application/x-www-form-urlencoded
说明：指定请求服务器返回的数据格式，此参数会发送到服务器
$("#editor").kendoEditor({
imageBrowser: {
transport: {
read: {
contentType: "application/json" //表示返回json数据
}
}
}
});
18、图片读取的数据 imageBrowser.transport.read.data
类型： String|Object|Function
说明：这个data数据会发到服务器。简单理解就是帐号用户识别，如果是多用户后台将会很有用。
$("#editor").kendoEditor({
imageBrowser: {
transport: {
read: {
//data: {id: 42,name: "John Doe"}
data: function() {return { id: 42, name: "John Doe" }}
}
}
}
});
19、图片数据读取数据格式 imageBrowser.transport.read.dataType
类型： String|Object|Function
说明：要求服务器返回的数据类型，常用的值是“json”和“jsonp”。
$("#editor").kendoEditor({
imageBrowser: {
transport: {
read: {
dataType: "json"
}
}
}
});
20、图片数据读取方式 imageBrowser.transport.read.type
类型： String
说明：请求数据的方式可选"POST", "GET", "PUT" or "DELETE"，默认是"GET"
$("#editor").kendoEditor({
imageBrowser: {
transport: {
read: {
type: "POST"
}
}
}
});
21、图片数据读取地址 imageBrowser.transport.read.url
类型： String|Function
说明：请求数据的地址
$("#editor").kendoEditor({
imageBrowser: {
transport: {
read: {
//url: "/read"
url: function(params) {
return "/read?t=" + new Date().getTime();
}
}
}
}
});
22、浏览缩略图地址 imageBrowser.transport.thumbnailUrl
类型： String|Function
说明：浏览服务器缩略图片的地址，如果没有指定将不显示对应的按钮，如果指定必须要返回有名称与图片地址。
$("#editor").kendoEditor({
imageBrowser: {
transport: {
thumbnailUrl: "/thumbnail"
}
}
});
23、上传图片地址 imageBrowser.transport.uploadUrl
类型： String
说明：处理上传图片的地址，如果没指定将不显示上传按钮
$("#editor").kendoEditor({
imageBrowser: {
transport: {
uploadUrl: "/thumbnail"
}
}
});
25、原始图片地址 imageBrowser.transport.imageUrl
类型： String|Function
说明：负责处理原始图片的地址，必须指定文件名的占位符{0}
$("#editor").kendoEditor({
imageBrowser: {
transport: {
imageUrl: "/content/images/{0}" //{0}将会被文件名替换
}
}
});
26、删除图片地址 imageBrowser.transport.destroy
类型： String|Function
说明：负责处理删除图片的地址，没有指定将不显示删除按钮。删除数据以jQuery.ajax发送
$("#editor").kendoEditor({
imageBrowser: {
transport: {
destroy: "/destroy"
}
}
});
25、图片删除数据类型 imageBrowser.transport.destroy.contentType
类型： String
默认：application/x-www-form-urlencoded
说明：指定请求服务器返回的数据格式，此参数会发送到服务器
$("#editor").kendoEditor({
imageBrowser: {
transport: {
destroy: {
contentType: "application/json" //表示返回json数据
}
}
}
});
26、图片删除数据 imageBrowser.transport.destroy.data
类型： String|Object|Function
说明：这个data数据会发到服务器。简单理解就是帐号用户识别，如果是多用户后台将会很有用。
$("#editor").kendoEditor({
imageBrowser: {
transport: {
destroy: {
//data: {id: 42,name: "John Doe"}
data: function() {return { id: 42, name: "John Doe" }}
}
}
}
});
27、图片删除数据格式 imageBrowser.transport.destroy.dataType
类型： String|Object|Function
说明：要求服务器返回的数据类型，常用的值是“json”和“jsonp”。
$("#editor").kendoEditor({
imageBrowser: {
transport: {
destroy: {
dataType: "json"
}
}
}
});
28、图片删除数据发送方式 imageBrowser.transport.destroy.type
类型： String
说明：支持的参数有"POST", "GET", "PUT" 和 "DELETE"，默认是"GET"
$("#editor").kendoEditor({
imageBrowser: {
transport: {
destroy: {
type: "POST"
}
}
}
});
29、图片删除数据地址 imageBrowser.transport.destroy.url
类型： String
说明：处理删除图片的url
$("#editor").kendoEditor({
imageBrowser: {
transport: {
destroy: {
//url: "/destroy"
url: function(params) {
return "/destroy?t=" + new Date().getTime();
}
}
}
}
});
30、生成文件夹配置 imageBrowser.transport.create
类型： String|Object
说明：生成文件夹的url或者选项，如果没指定将不显示生成文件夹按钮。注意生成过程是以jQuery.ajax传输数据。
$("#editor").kendoEditor({
imageBrowser: {
transport: {
create: "/create"
}
}
});
31、生成文件夹数据类型 imageBrowser.transport.create.contentType
类型： String
默认：application/x-www-form-urlencoded
说明：指定请求服务器返回的数据格式，此参数会发送到服务器
$("#editor").kendoEditor({
imageBrowser: {
transport: {
create: {
contentType: "application/json" //表示返回json数据
}
}
}
});
32、生成文件夹数据 imageBrowser.transport.create.data
类型： String|Object|Function
说明：这个data数据会发到服务器。简单理解就是帐号用户识别，如果是多用户后台将会很有用。
$("#editor").kendoEditor({
imageBrowser: {
transport: {
create: {
//data: {id: 42,name: "John Doe"}
data: function() {return { id: 42, name: "John Doe" }}
}
}
}
});
33、生成文件夹数据格式 imageBrowser.transport.create.dataType
类型： String|Object|Function
说明：要求服务器返回的数据类型，常用的值是“json”和“jsonp”。
$("#editor").kendoEditor({
imageBrowser: {
transport: {
create: {
dataType: "json"
}
}
}
});
34、生成文件夹数据发送方式 imageBrowser.transport.create.type
类型： String
说明：支持的参数有"POST", "GET", "PUT" 和 "DELETE"，默认是"GET"
$("#editor").kendoEditor({
imageBrowser: {
transport: {
create: {
type: "POST"
}
}
}
});
35、生成文件夹地址 imageBrowser.transport.create.url
类型： String
说明：处理生成文件夹的url地址
$("#editor").kendoEditor({
imageBrowser: {
transport: {
create: {
//url: "/create"
url: function(params) {
return "/create?t=" + new Date().getTime();
}
}
}
}
});
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
说明：设定上传按钮的文本
$("#editor").kendoEditor({
imageBrowser: {
messages: {
uploadFile: "上传图片"
}
}
});
51、图片排序规则 imageBrowser.messages.orderBy
类型：String
默认：Arrange by
说明：定义图片排序标签
$("#editor").kendoEditor({
imageBrowser: {
messages: {
orderBy: "Order by"
}
}
});
52、图片名称排序文本 imageBrowser.messages.orderByName
类型：String
默认：Name
说明：定义名称排序下拉列表文本。
$("#editor").kendoEditor({
imageBrowser: {
messages: {
orderByName: "Filename"
}
}
});
53、图片尺寸排序文本 imageBrowser.messages.orderBySize
类型：String
默认：Size
说明：定义尺寸排序下拉列表文本。
$("#editor").kendoEditor({
imageBrowser: {
messages: {
orderBySize: "File size"
}
}
});
54、文件夹不存在提示文本 imageBrowser.messages.directoryNotFound
类型：String
默认：A directory with this name was not found.
说明：定义文件夹找不到时的错误提示信息文本。
$("#editor").kendoEditor({
imageBrowser: {
messages: {
directoryNotFound: "Directory not found!"
}
}
});
55、空文件夹提示文本 imageBrowser.messages.emptyFolder
类型：String
默认：Empty Folder
说明：定义空文件夹的提示信息文本。
$("#editor").kendoEditor({
imageBrowser: {
messages: {
emptyFolder: "Folder is empty"
}
}
});
56、删除文件时的提醒文本 imageBrowser.messages.deleteFile
类型：String
默认：Are you sure you want to delete {0}?
说明：定义删除文件或者文件夹时的提醒信息文本。
$("#editor").kendoEditor({
imageBrowser: {
messages: {
deleteFile: "确实要删除? 删除后不可恢复!"
}
}
});
57、上传无效文件类型提示 imageBrowser.messages.invalidFileType
类型：String
默认：The selected file '{0}' is not valid. Supported file types are {1}.
说明：定义上传不支持的文件类型时提示信息
$("#editor").kendoEditor({
imageBrowser: {
messages: {
invalidFileType: "Supported file types are {1}. Please retry your upload."
invalidFileType: "可上传的文件类型有{1}. 请重新上传."
}
}
});
57、覆盖上传文件提醒 imageBrowser.messages.overwriteFile
类型：String
默认：A file with name '{0}' already exists in the current directory. Do you want to overwrite it?
说明：上传重复文件时的提醒信息
$("#editor").kendoEditor({
imageBrowser: {
messages: {
overwriteFile: "Do you want to overwrite the file with name '{0}'?"
}
}
});
58、搜索默认文本 imageBrowser.messages.search
类型：String
默认：Search
说明：定义搜索框点位符文本
$("#editor").kendoEditor({
imageBrowser: {
messages: {
search: "Find"
}
}
});
59、编辑器区域 body
类型：Element
说明：代表编辑器内容区的html节点
$("#editor").kendoEditor();
var editor = $("#editor").data("kendoEditor");
editor.body.style.backgroundColor = "#f00";
60、初始化默认工具defaultTools
类型：Array
说明：用于初始化默认工具的数组，注意编辑器生成后定义的数组将无效。
var defaultTools = kendo.ui.Editor.defaultTools;
//Shift + 回车插入段落,回车插入换行
defaultTools["insertLineBreak"].options.shift = false;
defaultTools["insertParagraph"].options.shift = true;
$("#editor").kendoEditor();
Events 事件
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) { //选择了内容时触发
}
});
快捷键
序号
快捷键
作用
1
Tab
使后一个工具获取焦点。
2
Shift + Tab
使前一个工具获取焦点。
关键词: kendoui,html5,editor 编辑时间: 2013-11-29 15:11:40
1622
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
