使用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 相关文章推荐
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
两种简单实现菜单高亮显示的JS类代码
Jun 27 Javascript
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 Javascript
详解vue 组件注册
Nov 20 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
第十三节 对象串行化 [13]
2006/10/09 PHP
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
Javascript 圆角div的实现代码
2009/10/15 Javascript
理解Javascript_10_对象模型
2010/10/16 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
用js的for循环获取radio选中的值
2013/10/21 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
2020/04/16 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
vuex的使用步骤
2021/01/06 Vue.js
python调用新浪微博API项目实践
2014/07/28 Python
python抓取网页中图片并保存到本地
2015/12/01 Python
Python子类继承父类构造函数详解
2019/02/19 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
保荐人的岗位职责
2013/11/19 职场文书
初婚未育未抱养证明
2014/01/12 职场文书
党员评议自我评价
2015/03/03 职场文书
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL
pytorch 6 batch_train 批训练操作
2021/05/28 Python
JVM钩子函数的使用场景详解
2021/08/23 Java/Android