使用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 相关文章推荐
document.all的一个比较完整的总结及案例
Jan 31 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
js中url对象化管理分析
Dec 29 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
使用js实现单链解决前端队列问题的方法
Feb 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
php小偷相关截取函数备忘
2010/11/28 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
Python在不同目录下导入模块的实现方法
2017/10/27 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
Django分页功能的实现代码详解
2019/07/29 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
python入门教程之基本算术运算符
2020/11/13 Python
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
好家长事迹材料
2014/01/23 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
小学生运动会广播
2015/08/19 职场文书
竞聘书的秘诀
2019/04/02 职场文书