使用layui 的layedit定义自己的toolbar方法


Posted in Javascript onSeptember 18, 2019

官方文档:http://www.layui.com/demo/layedit.html

官网文档目前是不支持layedit扩展式的。

自己手动实现扩展,定义自己的样式toolbar:

1.样式代码分析

分析页面初始化后加载的样式.

layeditIndex=layedit.build('noticeMatterDigest',{tool: ['left', 'center', 'right','|'],height: 120});

2.根据分析的样式进行js的追加

代码需要写在layui.use(..)页面初始化方法之内。

$(".layui-form .layui-form-item.layui-form-text .layui-input-block " +
  ".layui-layedit .layui-unselect.layui-layedit-tool")
  .append('<i class="layui-icon layui-icon-note" title="摘要模板1" οnclick="generateTextArea('+layeditIndex+')">?</i>')
  .append('<i class="layui-icon layui-icon-template-1" title="摘要模板2" οnclick="generateTextArea('+layeditIndex+')">?</i>')
  .append('<i class="layui-icon layui-icon-app" title="摘要模板3" οnclick="generateTextArea('+layeditIndex+')">?</i>')
  .append('<i class="layui-icon layui-icon-template" title="摘要模板4" οnclick="generateTextArea('+layeditIndex+')">?</i>')
  .append('<i class="layui-icon layui-icon-chat" title="摘要模板5" οnclick="generateTextArea('+layeditIndex+')">?</i>');

3.调用方法向layedit内追加值

官方文档没有设置值的方式,但是实际存在此方法可以调用

function generateTextArea(index) {
  layedit.setContent(index,"<p>姓名:*** *男,*年</p>");
  };

最终实现,扩展成自己需要的toolbar的形式,同时与原toolbar兼容。

以上这篇使用layui 的layedit定义自己的toolbar方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript使用技巧精萃[代码非常实用]
Nov 21 Javascript
js调用webservice中的方法实现思路及代码
Feb 25 Javascript
javascript 闭包详解
Feb 15 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
Javascript节点关系实例分析
May 15 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 Javascript
详解webpack进阶之loader篇
Aug 23 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
Vue实现购物车详情页面的方法
Aug 20 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
Typescript的三种运行方式(小结)
Sep 18 #Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 #Javascript
layui的layedit富文本赋值方法
Sep 18 #Javascript
vue语法自动转typescript(解放双手)
Sep 18 #Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 #Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 #Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 #Javascript
You might like
如何删除多级目录
2006/10/09 PHP
php for 循环语句使用方法详细说明
2010/05/09 PHP
utf8的编码算法 转载
2006/12/27 Javascript
做网页的一些技巧
2007/02/01 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
Python中的Descriptor描述符学习教程
2016/06/02 Python
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
如何利用Python写个坦克大战
2020/11/18 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
如何使用PHP session
2015/04/21 面试题
小学教育毕业生自荐信
2013/11/18 职场文书
中学教师培训制度
2014/01/31 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL
Python+pyaudio实现音频控制示例详解
2022/07/23 Python