使用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基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 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
生成sessionid和随机密码的例子
2006/10/09 PHP
PHP extract 将数组拆分成多个变量的函数
2010/06/30 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
JS delegate与live浅析
2013/12/21 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
基于JavaScript实现类似于百度学术高级检索功能
2016/03/02 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
python实现简单socket通信的方法
2016/04/19 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
pytorch permute维度转换方法
2018/12/14 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
什么是Python包的循环导入
2020/09/08 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
你对IPv6了解程度
2016/02/09 面试题
爱心捐款倡议书
2014/04/14 职场文书
安全生产月活动总结
2014/05/04 职场文书
廉洁教育学习材料
2014/05/19 职场文书
世界气象日活动总结
2015/02/27 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
南极大冒险观后感
2015/06/05 职场文书
永远是春天观后感
2015/06/12 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python