使用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 相关文章推荐
Js-$.extend扩展方法使方法参数更灵活
Jan 15 Javascript
jquery 删除字符串最后一个字符的方法解析
Feb 11 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
vue实现图书管理demo详解
Oct 17 Javascript
微信小程序scroll-view组件实现滚动动画
Jan 31 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
vue的全局变量和全局拦截请求器的示例代码
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
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
js下拉菜单语言选项简单实现
2013/09/23 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
Vue header组件开发详解
2018/01/26 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
jQuery实现简易聊天框
2020/02/08 jQuery
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
浅谈MySQL中的触发器
2015/05/05 Python
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
详解python中的json和字典dict
2018/06/22 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
平面设计师的工作职责
2013/11/21 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
国际贸易实务实训报告
2014/11/05 职场文书