摘要:
本插件基于 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 官网 https://github.com/ajaxorg/ace .
二, UploadImage/UploadVideo
图片视频上传需要配置相应的后台接口, 同时也可以设置上传附件格式, 附件大小等, 该参数继承自 layui.layupload.
- // 上传图片参数设置
- uploadImage: {
- url: '/Attachment/LayUploadFile',// 后台上传方法
- accept: 'image',// 限制上传类型
- acceptMime: 'image/*',
- exts: 'jpg|png|gif|bmp|jpeg',// 拓展名限制
- size: '10240'// 大小限制
- }
- // 上传视频参数设置 -- 同图片
- uploadVideo: {
- url: '/Attachment/LayUploadFile',
- accept: 'video',
- acceptMime: 'video/*',
- exts: 'mp4|flv|avi|rm|rmvb',
- size: '20480'
- }
三, CallDel 配置
该参数用于右键选中图片或视频进行删除时调用, 根据提供的后台方法进行删除, 返回的参数图片路径为 imgpath, 视频路径为 filepath, 后台可根据接受的文件路径进行删除或其他操作.
- // 右键删除图片 / 视频时的回调参数, post 到后台删除服务器文件等操作,
- // 传递参数:
- // 图片: imgpath -- 图片路径
- // 视频: filepath -- 视频路径 imgpath -- 封面路径
- , calldel: {
- url: '/Attachment/DeleteFile'
- }
四, Code=> 插入代码设置
该参数可配置也可不配置, 根据自己的实际需求出发, 如不配置, 则为原版的效果, 配置 hide 为 true 时, 会根据 defalut 设置的语言格式进行插入 < pre>.
- // 插入代码设置
- , codeConfig: {
- hide: true, // 是否显示编码语言选择框
- default: 'javascript' //hide 为 true 时的默认语言格式
- }
-- 未完待续
来源: https://www.cnblogs.com/KnifezZZ/p/10004407.html