摘要:

本插件基于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富文本编辑器拓展相关推荐

  1. 基于 Layui 的富文本编辑器和封面的实现方案

    文章目录 前言 素材文件 1. 富文本编辑器的实现步骤 1.1 添加 layui 表单行 1.2 导入富文本必须的 script 脚本 1.3 初始化富文本编辑器 2. 图片封面裁剪的实现步骤 2.1 ...

  2. LAYUI 整合富文本编辑器

    最近用layui搭一个后台, 在发文章的时候有用到富文本编辑器 ,这里记录一下. 本人用的是 kindeditor富文本编辑器,因为layui自带的富文本感觉功能不是很多. kindeditor 下载 ...

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

    摘要: 本插件基于layui.layedit,增加了HTML源码模式,片插入功能添加alt属性(layupload),视频插入功能,全屏功能,段落格式,字体颜色设置,右键菜单操作,插入锚点,水平线功能 ...

  4. layui的富文本编辑器如何上传图片,以及后期处理

    为什么80%的码农都做不了架构师?>>>    前端页面以及JS如下: <form class="layui-form" action="&quo ...

  5. layui富文本编辑器上传图片

    layui是贤心大神的开源前端框架,也是对后端菜鸟非常友好的一个框架,平常开发的时候就比较喜欢使用这个,最近刚好写网站就到了layui的富文本编辑器,遇到一些有意思的事情,就和大家聊聊. 首先准备工作 ...

  6. Layui富文本编辑器图片上传接口(.NET C#)

    本来想偷懒找个现成的接口,搜了一下发现没有现成的,那我在这写一个并分享给大家吧. demo打包好了在我的csdn下载中心:http://download.csdn.net/download/xiang ...

  7. js显示PHP源代码命令,layedit富文本编辑器中如何添加显示源码功能(代码)

    本篇文章给大家带来的内容是关于layedit 富文本编辑器中如何添加显示源码功能(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 由于项目需要用到富文本编辑器,并且要有显示源码 ...

  8. layui使用富文本已经使用第三方插件Kz.layedit来优化layui的富文本

    layui提供的精简的富文本 如果你正苦苦寻找一款轻量的Web富文本编辑器,那么LayEdit会是你不错的选择. 1.根据官方文档提供的layedit layui.use('layedit', fun ...

  9. layui源码详细分析系列之富文本编辑器模块

    所谓的富文本编辑器就是内嵌在浏览器上.所见即所得的文本编辑器,它的形式如下: layui框架中内置了layedit模块,该模块就是富文本编辑器模块,在最近两天中我自己使用原生js实现了简易的富文本编辑 ...

  10. 2021-11-17 layui富文本编辑器的使用(layedit)

    参考文章: 文档地址 layui富文本框layedit的使用及内容的禁用 html <textarea id="demo" name="demo" pla ...

最新文章

  1. 1078 Hashing
  2. Linux整合Apache和SVN
  3. (转)iOS7界面设计规范(10) - UI基础 - 文字排版与配色
  4. P3575-[POI2014]DOO-Around the world【环形dp】
  5. 大数据学习——虚拟机准备(改主机名)
  6. 江西计算机类单招学校有哪些专业,江西省2021年单招学校有哪些专业适合女生...
  7. 7.Django|分页器
  8. Android图像压缩库Tiny更新优化 解决X509TrustManager问题,重新编译libjpeg-turbo支持cpu全架构
  9. Excel转PDF,Excel行数过多导致PDF折行、换行显示
  10. 小企业会计准则 ——主要账务处理和财务报表(1)
  11. 黑鲨给电脑重装系统的详细步骤
  12. origin做主成分分析图_Origin如何进行主成分分析
  13. 如何用计算机基础知识提问,职业学校《计算机应用基础》课的提问策略
  14. 【除夕】春晚,我只要红包(内附节目单)
  15. win10如何进入BIOS
  16. java 测试代码效率_JAVA程序的性能测试方法
  17. 贾扬清官宣:从阿里离职,或将投身AI创业!
  18. B2C网站提高转化率的方法
  19. The Humble Programmer
  20. GBK-unicode对照

热门文章

  1. iradon函数和radon函数
  2. 基于新浪云服务器的微信公众号
  3. Jframe任务栏图标隐藏
  4. 5号字对应的数字字号_5号字体是多少pt-字号,尺寸
  5. 【WA】TBC功能WA串更新日志(更新至2022.06.02)
  6. websphere9静默式安装文档(简易版)
  7. c语言高亮字符,C语言语法高亮工具
  8. c语言实现校园疫情防控系统
  9. 负载均衡器/LB - 学习/实践
  10. 紫微斗数诸星分级及分类