使用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设置FieldSet展开与收缩
May 15 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
JavaScript canvas实现文字时钟
Jan 10 Javascript
JavaScript实现贪吃蛇游戏
Jun 16 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 setcookie函数的参数说明及其用法
2014/04/20 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
利用python求相邻数的方法示例
2017/08/18 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
彪马日本官网:PUMA日本
2019/01/31 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
会议邀请书范文
2014/02/02 职场文书
大学生个人自荐信
2014/02/24 职场文书
理财投资建议书
2014/03/12 职场文书
生日主持词
2014/03/20 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书