使用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 相关文章推荐
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
javascript修改图片src的方法
Jan 27 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 Javascript
swiper4实现移动端导航切换
Oct 16 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 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
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
javascript两段代码,两个小技巧
2010/02/04 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
jquery对table做排序操作的实例演示
2017/08/10 jQuery
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
Python连接字符串过程详解
2020/01/06 Python
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
Linux操作面试题
2015/02/11 面试题
三年级科学教学反思
2014/01/29 职场文书
服务员岗位职责
2014/01/29 职场文书
三查三看党性分析材料
2014/02/18 职场文书
运动会通讯稿500字
2014/02/20 职场文书
《阳光》教学反思
2014/02/23 职场文书
小学六年级学生评语
2014/04/22 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
节能宣传周活动总结
2014/05/08 职场文书
员工工作及收入证明
2014/10/28 职场文书
2019同学聚会主持词
2019/05/06 职场文书
浅谈Python中对象是如何被调用的
2022/04/06 Python
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript