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

2018-11-26 07:54:37来源：博客园阅读 ()

摘要：

　　本插件基于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时的默认语言格式
                }

　　　　--未完待续

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有