使用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 onmouseout 解决办法
Jul 17 Javascript
子页向父页传值示例
Nov 27 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
AngularJS手动表单验证
Feb 01 Javascript
搞定immutable.js详细说明
May 02 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 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
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
PHP mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
CI框架表单验证实例详解
2016/11/21 PHP
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
python使用PyFetion来发送短信的例子
2014/04/22 Python
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
python读取文件名并改名字的实例
2019/01/07 Python
python处理大日志文件
2019/07/23 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
介绍一下grep命令的使用
2015/06/12 面试题
怎么样写好简历中的自我评价
2013/10/25 职场文书
乡下人家教学反思
2014/02/01 职场文书
《雷雨》教学反思
2014/02/20 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
环保建议书300字
2014/05/14 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang