摘要: 本插件基於layui.layedit,增加了HTML源碼模式,片插入功能添加alt屬性(layupload),視頻插入功能,全屏功能,段落格式,字體顏色設置,右鍵菜單操作,插入錨點,水平線功能。 所有拓展功能菜單按鈕圖標均引用自layui自帶圖標。 演示地址:kz.layedit 一、基礎拓 ...
摘要:
本插件基於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時的預設語言格式 }
--未完待續