<#include "/include/macros.ftl"> <@header>

编辑器用例

中间隔离带

第一个 demo(菜单和编辑器区域分开)

第二个 demo(常规)


第三个 demo(oneBlog系统单独定制,支持文件上传)

使用方式:

# html
<div id="editor"></div>

# js
$.wangEditor.init({
container: "#editor",
textareaName: "content",
uploadUrl: "/api/uploadFile",
uploadFileName: "file",
uploadType: "goods",
customCss: {
"overflow-y": "scroll",
"height": "100%",
"max-height": "125px"
}
})

  • container: 编辑器的id,默认为editor
  • textareaName: 自动生成的textarea组件的name,默认为content。可以自定义为表单中实际的参数name
  • uploadUrl: 文件上传的api路径。如果不为空,则开启上传文件的功能
  • uploadFileName: 文件上传时后台接收文件的参数名,默认为file
  • uploadType: 当前上传文件的场景类型,最好根据实际业务取名,它会决定最终上传完成后的文件路径,比如在商品信息管理页中指定了uploadType = goods,那么最终上传完成后的文件路径就是:oneblog/goods/{filename}.png,默认为空
  • customCss: 自定义的css,可以修改编辑器大小,默认为空。注:如果是修改高度,必须通过max-height参数修改,并且一定要加上:"overflow-y": "scroll", "height": "100%"这两项配置,否则可能会使编辑器显示不正确
<@footer>