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时的默认语言格式

}

--未完待续

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/442516.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机操作基础英语,计算机操作基础word练习题参考答案

《计算机操作基础》word练习题答案班别学号姓名一、判断题:1、( √) 用“插入”菜单中的“符号”命令可以插入符号和其他特殊字符。2、( √) WOR中D的工具栏可由用户根据需要显示或隐藏。3、( √) 对文本及图片都可以进行剪切、复制、粘贴操作。4、( √) 用“格式”…

3dmax里面cr材质转换vr材质_3DMAX零基础入门视频全套教程

3Dmax基础教程全套视频:点链接就行1.3dmax界面介绍2、3dmax主工具栏3、创建面板与修改面板4、时间轴与视口按钮5、3D视口讲解6、3dmax样条线界面7、CAD如何导入3dmax8、3DMAX绘制初步空间9、3DMAX导入图片与车削10、倒角和倒角剖面11、修改器堆栈|12、弯曲命令13、对…

html5 自定义 datepicker,如何使用 React 构建自定义日期选择器(3)

本文作者:IMWeb howenhuo未经同意,禁止转载Datepicker 组件构建 Datepicker 组件要开始构建 Datepicker 组件,请将以下代码片段添加到 src/components/Datepicker/index.js 文件。import React from "react";import PropTypes from…

群签名和环签名的区别_超级签名和TF签名使用个人开发者账号的区别是什么?...

了解过当前ios签名的朋友都知道,目前ios签名共分为企业签名、超级签名和TF签名,其中企业签名作为签名行业的“老大哥”,深受各路开发者和App运营商的喜爱。而我们今天的主角却是其他两种:超级签名和TF签名。这两种签名方式与企业签…

现代计算机网络的6个方面的应用,现代计算机网络技术应用及发展(共4384字).doc...

现代计算机网络技术应用及发展(共4384字)现代计算机网络技术应用及发展(共4384字)摘要:计算机网络技术是一门融合了网络技术学科、计算机技术学科和通信技术学科多方面知识的交叉学科,当下信息技术快速发展,计算机网络技术在社会各个领域都得…

matlab水蒸气焓值计算_从第一性原理计算出发来理解含能配合物宏观行为的趋势...

欢迎关注微信公众平台"计算材料学",微信ID:jisuancailiao近日,北京理工大学物理学院郭伟课题组(博士研究生孙矗丽)与北京理工大学爆炸科学与技术国家重点实验室、机电学院张同来课题组在Physical Chemistry …

抖音文字时钟壁纸html,抖音文字时钟app

抖音文字时钟app是一款蛮火蛮有趣的复古罗盘时钟应用,喜欢刷抖音的用户是不是在抖音上看到了这些的时钟,你是不是对这个罗盘产生了兴趣,今天小编为你提供了设置这个时钟的app,当前只有安卓版,苹果版暂未上线&#xff0…

计算机网络十进制转二进制的应用题,【网络-理论】二进制与十进制的转换

由于计算机中运行的数据都是以二进制数的形式存在的,学习二进制数的计算成为计算机专业必备的一门知识。概述正如字面上的意思:二进制数,满二进一,所以说二进制只由 数字0和数字1组成。十进制,满十进一,所以…

最大化_怎样保证油压缓冲器工作效率最大化?

对于油压缓冲器,广大使用者在采购前普遍考虑的是油压缓冲器的价格、质量、品牌。挑选出合适的油压缓冲器仅仅是第一步,提高其工作效率,增加产能,才能为企业创造更多价值。要保证油压缓冲器工作效率最大化,需要做到以下…

采油工计算机试题库,数字化采油工试题库.doc

单项选择题:题目正确答案解析考题难度知识点1数字化就是将复杂多变的信息转变为可以度量的( ),再为这些数据建立起适当的数字化模型,把它们转变为一系列的二进制代码,引入计算机内部,进行统一处理。A、数字、数据 B、知…

aosp 本地版本管理_谈 DevOps 平台实施:我在本地跑明明成功的,为什么在你平台跑就报错?...

我在本地跑明明成功的,为什么在你平台跑就报错?用户在 Jenkins 上跑构建时,失败了,把日志截图给我看,如下图:在过去几个月,每个星期都会有一两个 Jenkins 用户就会给我发送类似的错误日志。这样…

江苏大学2020计算机考研,江苏大学2020年硕士研究生复试时间及主要安排

根据《江苏大学2020年硕士研究生招生复试及录取办法》(江大研〔2020〕3号),为做好我校2020年硕士研究生复试及录取工作,现将有关工作安排通知如下:一、复试人选符合我校复试分数线要求的一志愿考生、符合各学院(中心、研究院、所,…

尼康d7200拍照_为什么尼康和佳能的全画幅旗舰单反却只有2000多万像素?

华为P20Pro摄像头都做到了4000万像素,为什么尼康和佳能的全画幅顶级单反却只有2000多万像素?下面我们先来看看目前市场上摄影器材的像素情况。单机身售价高达3万多的尼康旗舰全画幅单反D5总像素是2133万,有效像素是2082万;单机身售…

计算机技术员好学吗,电脑技术员,沦落到如此地步...

2001年16岁的我就去了浙江余姚打工,当时的我还没有现在大家那么大的野心,想干出一番大的事业,只能想着学一门技术能够有自己一席之地,当时我学过搓丝机,就是做螺丝,第一个月没有工资,老板给了我…

级差公排php如何_什么是专业级差?专业级差怎么安排专业?

相信很多考生在阅读高校招生简章的时候,在录取规则那里都会看到专业级差这么一个词,很多同学和家长就不明白了,这个专业级差到底是什么意思呢?该怎么去理解这个专业级差呢?下面新亚艺考培训学校就带着大家一起了解什么…

国家级一级计算机考试题,国家级计算机一级考试试题

国家级计算机一级考试试题1.在Windows中,打开"资源管理器"窗口后,要改变文件或文件夹的显示方式,应选用( )。CA、"文件"菜单B、"编辑"菜单C、"查看"菜单D、"帮助"菜单2.在Windows的"…

重物码垛搬运机器人_节卡机器人:5G下的智慧物流——柔性生产物流系统

随着经济的发展,制造一直面临着劳动力成本迅速攀升、产能过剩、竞争激烈、客户个性化需求日益增长等问题。另一方面招工难,以及缺乏专业人才,制造业转型迫在眉睫。现在,5G、物联网、协作机器人、机器视觉等新兴技术迅速兴起&#…

燕山大学数字通信计算机仿真课程设计,燕山大学数字通信计算机仿真课程设计模板...

燕山大学数字通信计算机仿真课程设计模板数字通信计算机课设程序代码 //SigTranmit.cppimplementationoftheSigTranmitclass. // // includestdafx.h includeASK.h includeSigTranmit.h includemath.h ifdef_DEBUG undefTHIS_FILE staticcharTHIS_FILE[]__FILE__; definenewDEB…

霍纳法树形流图中处理机p个数_处理机管理(进程管理)

一、进程1.1.进程的定义程序关于某个数据集合的一次执行过程1.2.进程的特征(与程序比较)结构特征进程控制块(PCB) 程序 数据 进程实体动态性 -- 最基本特征进程:进程实体的一次执行过程,有生命周期程序:程序是一组有序指令的集…

上海电力学院计算机学院怎么样,上海电力学院计算机科学与技术学院在职研究生_上海电力学院在职研究生_在职研究生招生信息网...

计算机科学与技术学院现设有计算机系、软件工程系、信息安全系、实验教学中心4个教学单位,承担着计算机科学与技术、计算机科学与技术(电力企业信息化)、软件工程、信息安全、网络工程五个专业方向的本科教学工作,以及全校本科生的计算机基础教学任务。拥…