使用layui 的layedit定义自己的toolbar方法

作者:天武我非 时间:2023-08-24 16:21:43 

官方文档: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兼容。

来源:https://blog.csdn.net/tjbsl/article/details/80537557

标签:layui,layedit,toolbar
0
投稿

猜你喜欢

  • Django 项目重命名的实现步骤解析

    2021-01-13 14:05:49
  • django框架如何集成celery进行开发

    2022-09-13 11:18:24
  • Go泛型实战教程之如何在结构体中使用泛型

    2024-05-13 10:45:00
  • 用pandas按列合并两个文件的实例

    2022-05-31 22:21:04
  • OpenCV图像识别之姿态估计Pose Estimation学习

    2023-08-10 14:25:28
  • python中通过pip安装库文件时出现“EnvironmentError: [WinError 5] 拒绝访问”的问题及解决方案

    2023-08-29 20:25:40
  • Vue 中生命周期定义及流程

    2024-05-09 15:21:54
  • 获取 Textarea 的光标位置

    2010-11-30 21:33:00
  • Python直接赋值、浅拷贝与深度拷贝实例分析

    2023-03-15 08:08:02
  • python中使用psutil查看内存占用的情况

    2022-11-11 11:26:22
  • Python自动化办公之创建PPT文件

    2022-01-16 19:31:49
  • Golang二维切片初始化的实现

    2024-05-09 14:57:54
  • MySQL语句执行顺序和编写顺序实例解析

    2024-01-26 12:39:18
  • Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)

    2024-05-09 09:21:34
  • tensorflow实现打印ckpt模型保存下的变量名称及变量值

    2021-07-02 21:19:25
  • Python调整matplotlib图片大小的3种方法汇总

    2023-11-28 13:20:26
  • golang 如何通过反射创建新对象

    2024-04-27 15:24:38
  • python编写计算器功能

    2022-10-29 14:07:33
  • Python2/3中urllib库的一些常见用法

    2023-11-05 00:24:04
  • MySQL定时备份数据库操作示例

    2024-01-13 09:34:24
  • asp之家 网络编程 m.aspxhome.com