layedit html源码编辑,Kz.layedit-layui.layedit富文本编辑器拓展
摘要:
本插件基于layui.layedit,增加了html源码模式,片插入功能添加alt属性(layupload),视频插入功能,全屏功能,段落格式,字体颜色设置,右键菜单操作,插入锚点,水平线功能。
所有拓展功能菜单按钮图标均引用自layui自带图标。
演示地址:
一、基础拓展配置
tool: [
'html', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontfomatt', 'colorpicker', 'face'
, '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'image_alt', 'video', 'anchors'
, '|', 'fullscreen'
]
html=> html源码模式(弹窗显示),
addhr=>添加水平线
,
fontfomatt =>段落格式设置,设置当前行为p,h1~4,div等格式,
colorpicker=>字体颜色设置,
image_alt=>带alt属性,宽高设置的图片上传,(image原版图片上传依旧支持),
video =>视频上传,带封面上传,
anchors=> 添加锚点,通过样式在编辑器内展示,不带样式无法展示,待修复,
fullscreen=>全屏设置
一、html源码模式
html源码模式引用第三方插件ace,优化源码展示样式,引用ace编辑器仅保留了html源码样式和tomorrow主题,如有需要可自行更换,目录为/content/ace/ace.js,指路--> 。
二、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设置的语言格式进行插入
。
//插入代码设置
, codeconfig: {
hide: true, //是否显示编码语言选择框
default: 'javascript' //hide为true时的默认语言格式
}
--未完待续
layedit html源码编辑,Kz.layedit-layui.layedit富文本编辑器拓展相关推荐
- 基于 Layui 的富文本编辑器和封面的实现方案
文章目录 前言 素材文件 1. 富文本编辑器的实现步骤 1.1 添加 layui 表单行 1.2 导入富文本必须的 script 脚本 1.3 初始化富文本编辑器 2. 图片封面裁剪的实现步骤 2.1 ...
- LAYUI 整合富文本编辑器
最近用layui搭一个后台, 在发文章的时候有用到富文本编辑器 ,这里记录一下. 本人用的是 kindeditor富文本编辑器,因为layui自带的富文本感觉功能不是很多. kindeditor 下载 ...
- php layui富文本编辑器,Kz.layedit-layui.layedit富文本编辑器拓展
摘要: 本插件基于layui.layedit,增加了HTML源码模式,片插入功能添加alt属性(layupload),视频插入功能,全屏功能,段落格式,字体颜色设置,右键菜单操作,插入锚点,水平线功能 ...
- layui的富文本编辑器如何上传图片,以及后期处理
为什么80%的码农都做不了架构师?>>> 前端页面以及JS如下: <form class="layui-form" action="&quo ...
- layui富文本编辑器上传图片
layui是贤心大神的开源前端框架,也是对后端菜鸟非常友好的一个框架,平常开发的时候就比较喜欢使用这个,最近刚好写网站就到了layui的富文本编辑器,遇到一些有意思的事情,就和大家聊聊. 首先准备工作 ...
- Layui富文本编辑器图片上传接口(.NET C#)
本来想偷懒找个现成的接口,搜了一下发现没有现成的,那我在这写一个并分享给大家吧. demo打包好了在我的csdn下载中心:http://download.csdn.net/download/xiang ...
- js显示PHP源代码命令,layedit富文本编辑器中如何添加显示源码功能(代码)
本篇文章给大家带来的内容是关于layedit 富文本编辑器中如何添加显示源码功能(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 由于项目需要用到富文本编辑器,并且要有显示源码 ...
- layui使用富文本已经使用第三方插件Kz.layedit来优化layui的富文本
layui提供的精简的富文本 如果你正苦苦寻找一款轻量的Web富文本编辑器,那么LayEdit会是你不错的选择. 1.根据官方文档提供的layedit layui.use('layedit', fun ...
- layui源码详细分析系列之富文本编辑器模块
所谓的富文本编辑器就是内嵌在浏览器上.所见即所得的文本编辑器,它的形式如下: layui框架中内置了layedit模块,该模块就是富文本编辑器模块,在最近两天中我自己使用原生js实现了简易的富文本编辑 ...
- 2021-11-17 layui富文本编辑器的使用(layedit)
参考文章: 文档地址 layui富文本框layedit的使用及内容的禁用 html <textarea id="demo" name="demo" pla ...
最新文章
- 1078 Hashing
- Linux整合Apache和SVN
- (转)iOS7界面设计规范(10) - UI基础 - 文字排版与配色
- P3575-[POI2014]DOO-Around the world【环形dp】
- 大数据学习——虚拟机准备(改主机名)
- 江西计算机类单招学校有哪些专业,江西省2021年单招学校有哪些专业适合女生...
- 7.Django|分页器
- Android图像压缩库Tiny更新优化 解决X509TrustManager问题,重新编译libjpeg-turbo支持cpu全架构
- Excel转PDF,Excel行数过多导致PDF折行、换行显示
- 小企业会计准则 ——主要账务处理和财务报表(1)
- 黑鲨给电脑重装系统的详细步骤
- origin做主成分分析图_Origin如何进行主成分分析
- 如何用计算机基础知识提问,职业学校《计算机应用基础》课的提问策略
- 【除夕】春晚,我只要红包(内附节目单)
- win10如何进入BIOS
- java 测试代码效率_JAVA程序的性能测试方法
- 贾扬清官宣:从阿里离职,或将投身AI创业!
- B2C网站提高转化率的方法
- The Humble Programmer
- GBK-unicode对照