使用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实现仿Windows关机效果
Mar 10 Javascript
jquery 3D球状导航的文章分类
Jul 06 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
vue 权限认证token的实现方法
Jul 17 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
使用 php4 加速 web 传输
2006/10/09 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
jQuery之过滤元素操作小结
2013/11/30 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
使用console进行性能测试
2015/04/27 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
jQuery分组选择器简单用法示例
2019/04/04 jQuery
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
Python中装饰器学习总结
2018/02/10 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
详解Python sys.argv使用方法
2019/05/10 Python
python实现自动清理重复文件
2020/08/24 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
百货商场楼层班组长竞聘书
2014/03/31 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
申报优秀教师材料
2014/12/16 职场文书
监考失职检讨书
2015/01/26 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书