使用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 相关文章推荐
event.srcElement+表格应用
Aug 29 Javascript
鼠标移动到一张图片时变为另一张图片
Dec 05 Javascript
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
通过length属性判断jquery对象是否存在
Oct 18 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 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
Terran剧情介绍
2020/03/14 星际争霸
ASP和PHP都是可以删除自身的
2007/04/09 PHP
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
PHP常用的三种设计模式
2017/02/17 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
python关闭windows进程的方法
2015/04/18 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
python实现图片上添加图片
2019/11/26 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
"序列点" 是什么
2016/07/29 面试题
2014新年寄语
2014/01/20 职场文书
校庆筹备方案
2014/03/30 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
小学教师读书笔记
2015/07/01 职场文书
珍爱生命主题班会
2015/08/13 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers