使用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 Mobile入门—外部链接切换示例代码
Jan 08 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
简述pm2常用命令集合及配置文件说明
May 30 Javascript
JS document对象简单用法完整示例
Jan 14 Javascript
小程序表单认证布局及验证详解
Jun 19 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/01/05 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
js多个物体运动功能实例分析
2016/12/20 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
Python实现求两个csv文件交集的方法
2017/09/06 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
酒店服务实习自我鉴定
2013/09/22 职场文书
制定岗位职责的原则
2013/11/08 职场文书
工程测量与监理专业应届生求职信
2013/11/27 职场文书
实习自我鉴定
2013/12/15 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL