kendoUI系列教程之Editor编辑器

搜索

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

【kendo UI】

下载

新闻

文章

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
说明：用于编辑器的工具，可以自定义指定名称，但必须定义成对象。

以下是可用的编辑器命令

基本文本格式 - 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

<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>

快捷键