使用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提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 Javascript
js/jQuery简单实现选项卡功能
Jan 02 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 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
PHP常用正则表达式集锦
2014/08/17 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
prototype 的说明 js类
2006/09/07 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
Python基础知识点 初识Python.md
2019/05/14 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
Python是如何进行类型转换的
2013/06/09 面试题
幼儿园春游活动方案
2014/01/19 职场文书
协议书与合同的区别
2014/04/18 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP