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

官方文档：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方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于ssm框架实现layui分页效果

    基于ssm框架实现layui分页效果

    今天完成了基于ssm框架下,layui的分页操作,现在把核心内容分享一下: 1.前端页面的关键代码,基于html5 <!--自动渲染--> <table class="layui-table" lay-data="{cellMinWidth:100, height:'full-500', url:'meter/query', page:true, id:'idTest'}" lay-filter="demo"> <t

  • layui.js实现的表单验证功能示例

    layui.js实现的表单验证功能示例

    本文实例讲述了layui.js实现的表单验证功能.分享给大家供大家参考,具体如下: 该示例可针对文本框,手机,邮箱,textarea等格式进行验证 首先引入如下文件: <script src="layui/layui.js"></script> <script src="layui/lay/dest/layui.all.js"></script> <link rel="stylesheet"

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

    官方文档: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的layedit富文本赋值方法

    layedit赋值方法如下 /** * 设置编辑器内容 * @param {[type]} index 编辑器索引 * @param {[type]} content 要设置的内容 * @param {[type]} flag 是否追加模式 */ layedit.setContent(index, content, flag); flag是true,是追加模式, flag是false,赋值模式 以上这篇layui的layedit富文本赋值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,

  • layui框架与SSM前后台交互的方法

    采用layui前台框架实现前后台交互,数据分页显示以及删除操作,具体方式如下: 一.数据分页显示 1.前端 (1)html页面 <!--轮播数据分页显示--> <table class="layui-hide" id="content_lbt" lay-filter="content_lbt_filter"></table> (2)请求渲染数据 $(function() { /*轮播数据分页显示*/ layui

  • Python基于numpy灵活定义神经网络结构的方法

    本文实例讲述了Python基于numpy灵活定义神经网络结构的方法.分享给大家供大家参考,具体如下: 用numpy可以灵活定义神经网络结构,还可以应用numpy强大的矩阵运算功能! 一.用法 1). 定义一个三层神经网络: '''示例一''' nn = NeuralNetworks([3,4,2]) # 定义神经网络 nn.fit(X,y) # 拟合 print(nn.predict(X)) #预测 说明: 输入层节点数目:3 隐藏层节点数目:4 输出层节点数目:2 2).定义一个五层神经网络:

  • Asp.net MVC定义短网址的方法

    在MVC的逻辑代码里,Controller和Action是必须的,但是在网址里,并不需要完全体现Controller和Action.比如我们经常希望看到http://localhost/About而不是http://localhost/Home/About. 默认的路由规则 新建MVC应用程序后,Global.asax里默认注册的路由规则是: public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRout

  • Yii列表定义与使用分页方法小结(3种方法)

    本文实例讲述了Yii列表定义与使用分页方法.分享给大家供大家参考,具体如下: 方法一:控制器定义 function actionIndex(){ $criteria = new CDbCriteria(); $count=Article::model()->count($criteria); $pages=new CPagination($count); // 返回前一页 $pages->pageSize=10; $pages->applyLimit($criteria); $model

  • python中定义结构体的方法

    Python中没有专门定义结构体的方法,但可以使用class标记定义类来代替结构体,其成员可以在构造函数__init__中定义,具体方法如下. 复制代码 代码如下: class item:    def __init__(self):        self.name = ''     # 名称        self.size = 10     # 尺寸        self.list = []     # 列表 a = item() # 定义结构对象a.name = 'cup'a.size

  • JavaScript定义全局对象的方法示例

    本文实例讲述了JavaScript定义全局对象的方法.分享给大家供大家参考,具体如下: !function (factory) { factory(window['Hi'] = { __a: function () { console.log('Hi.__a'); }, __b: function () { console.log('Hi.__b'); }, __c: function () { console.log('Hi.__c'); } }); }(function (Hi) { if

  • 获取SqlServer存储过程定义的三种方法

    存储过程的概念 存储过程Procedure是一组为了完成特定功能的SQL语句集合,经编译后存储在数据库中,用户通过指定存储过程的名称并给出参数来执行. 存储过程中可以包含逻辑控制语句和数据操纵语句,它可以接受参数.输出参数.返回单个或多个结果集以及返回值. 由于存储过程在创建时即在数据库服务器上进行了编译并存储在数据库中,所以存储过程运行要比单个的SQL语句块要快.同时由于在调用时只需用提供存储过程名和必要的参数信息,所以在一定程度上也可以减少网络流量.简单网络负担. 存储过程的优点 A. 存储

  • C#动态生成按钮及定义按钮事件的方法

    本文实例讲述了C#动态生成按钮及定义按钮事件的方法.分享给大家供大家参考.具体实现方法如下: 1.后台生成input的button按钮 复制代码 代码如下: HtmlGenericControl control = new HtmlGenericControl("input"); control.Attributes.Add("type", "button"); control.Attributes.Add("onclick"

随机推荐