Kz.layedit-layui.layedit富文本编辑器拓展

发布日期:2019-04-04

摘要:

  本插件基于layui.layedit,增加了HTML源码模式,片插入功能添加alt属性(layupload),视频插入功能,全屏功能,段落格式,字体颜色设置,右键菜单操作,插入锚点,水平线功能。

所有拓展功能菜单按钮图标均引用自layui自带图标。

演示地址:kz.layedit

 

  一、基础拓展配置

tool: [ "html", "code", "strong", "italic", "underline", "del", "addhr", "|", "fontFomatt", "colorpicker", "face" , "|", "left", "center", "right", "|", "link", "unlink", "image_alt", "video", "anchors" , "|", "fullScreen" ]

  html=> html源码模式(弹窗显示),

  addhr=>添加水平线<hr>,

  fontFomatt =>段落格式设置,设置当前行为p,h1~4,div等格式,

  colorpicker=>字体颜色设置,

  image_alt=>带alt属性,宽高设置的图片上传,(image原版图片上传依旧支持),

  video =>视频上传,带封面上传,

  anchors=> 添加锚点,通过样式在编辑器内展示,不带样式无法展示,待修复,

  fullScreen=>全屏设置

 

  一、HTMl源码模式

 

    HTML源码模式引用第三方插件ace,优化源码展示样式,引用ace编辑器仅保留了html源码样式和tomorrow主题,如有需要可自行更换,目录为/Content/ace/ace.js,指路--> ace官网。

      

  二、UploadImage/UploadVideo

    图片视频上传需要配置相应的后台接口,同时也可以设置上传附件格式,附件大小等,该参数继承自layui.layupload。

    

1 //上传图片参数设置 2 uploadImage: {3 url: "/Attachment/LayUploadFile",//后台上传方法4 accept: "image",//限制上传类型5 acceptMime: "image/*",6 exts: "jpg|png|gif|bmp|jpeg",//拓展名限制7 size: "10240"//大小限制8 }

1 //上传视频参数设置--同图片2 uploadVideo: {3 url: "/Attachment/LayUploadFile",4 accept: "video",5 acceptMime: "video/*",6 exts: "mp4|flv|avi|rm|rmvb",7 size: "20480"8 }

  三、CallDel配置

该参数用于右键选中图片或视频进行删除时调用,根据提供的后台方法进行删除,返回的参数图片路径为imgpath,视频路径为 filepath,后台可根据接受的文件路径进行删除或其他操作。

//右键删除图片/视频时的回调参数,post到后台删除服务器文件等操作, //传递参数: //图片: imgpath --图片路径 //视频: filepath --视频路径 imgpath --封面路径 , calldel: { url: "/Attachment/DeleteFile" }

    四、Code=>插入代码设置

    该参数可配置也可不配置,根据自己的实际需求出发,如不配置,则为原版的效果,配置hide为true时,会根据defalut设置的语言格式进行插入<pre>。

//插入代码设置 , codeConfig: { hide: true, //是否显示编码语言选择框 default: "javascript" //hide为true时的默认语言格式 }

    --未完待续