使用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 相关文章推荐
改进版通过Json对象实现深复制的方法
Oct 24 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
javascript连续赋值问题
Jul 08 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 Javascript
解析微信JS-SDK配置授权,实现分享接口
Dec 09 Javascript
Vue生命周期示例详解
Apr 12 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
JavaScript修改注册表实例代码
Jan 05 Javascript
vue实现滑动解锁功能
Mar 03 Vue.js
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
php类常量的使用详解
2013/06/08 PHP
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
php实现的操作excel类详解
2016/01/15 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
jquery.validate使用时遇到的问题
2015/05/25 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
Python中装饰器高级用法详解
2017/12/25 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
python双向链表原理与实现方法详解
2019/12/03 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
六十岁生日答谢词
2014/01/10 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书