layui 富文本编辑器和textarea值的相互传递方法

 更新时间:2019年09月18日 15:20:46   作者:Gino_tkzzz  
今天小编就为大家分享一篇layui 富文本编辑器和textarea值的相互传递方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

1.富文本编辑器传递值给textarea

<div class="layui-form-item layui-form-text">
   <label class="layui-form-label">资讯内容</label>
   <div class="layui-input-block">
     <textarea name="content" id="demo" placeholder="请输入资讯内容" class="layui-textarea" lay-verify="content"></textarea>
   </div>
</div>

注意:textarea添加lay-verify属性

layui.use(['form','layedit'], function() {
    var form = layui.form,
    layer = layui.layer,
    $ = layui.jquery,
    var layedit = layui.layedit;
 
    //创建编辑器
    index = layedit.build('demo',{
      tool:[
        'strong' //加粗
        ,'italic' //斜体
        ,'underline' //下划线
        ,'del' //删除线
        ,'|' //分割线
        ,'left' //左对齐
        ,'center' //居中对齐
        ,'right' //右对齐
        ,'link' //超链接
        ,'unlink' //清除链接
        ,'face' //表情
      ]
    }); //建立编辑器
    
     //自定义验证规则
    form.verify({
      content:function () {
        layedit.sync(index);
      }
    });
})

创建富文本编辑器,自定义验证规则这里进行同步 index

这样就可以将富文本编辑器同步到textarea

2.将textarea的值同步到layui富文本编辑器

layedit.setContent(index,$str); 

index依然还是之前创建时的变量名

$str 可以是后台通过ajax传回来的数据

以上这篇layui 富文本编辑器和textarea值的相互传递方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • css+js实现部分区域高亮可编辑遮罩层

    css+js实现部分区域高亮可编辑遮罩层

    下面介绍我在项目中实现的方式,全屏遮罩,部分区域可操作,需要的朋友可以参考下
    2014-03-03
  • 微信小程序页面间传递数组对象方法解析

    微信小程序页面间传递数组对象方法解析

    这篇文章主要介绍了微信小程序页面间传递数组对象方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • JavaScript实现简单的拖动效果

    JavaScript实现简单的拖动效果

    这篇文章主要为大家详细介绍了JavaScript实现简单的拖动效果,具有一定的参考价值,感兴趣的朋友可以参考一下
    2016-07-07
  • 也说JavaScript中String类的replace函数

    也说JavaScript中String类的replace函数

    最近读了sharpxiajun的博文《javascript笔记--String类replace函数的一些事》,感觉写的很好,很有帮助。
    2011-09-09
  • Javascript实现表单检验

    Javascript实现表单检验

    这篇文章主要介绍了Javascript实现表单检验,以注册界面为例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 微信小程序实现一个自定义遮罩层效果

    微信小程序实现一个自定义遮罩层效果

    这篇文章主要介绍了微信小程序实现一个自定义遮罩层,大概效果是点击按钮Show显示遮罩层,再次点击屏幕任何地方隐藏遮罩层,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • 常常会用到的截取字符串substr()、substring()、slice()方法详解

    常常会用到的截取字符串substr()、substring()、slice()方法详解

    javascript中给我们提供三个截取字符串的方法,分别是:slice(),substring()和substr()。下面我们对这三个函数进行详细说明和比较,需要的朋友可以参考下
    2015-12-12
  • 手把手15分钟搭一个企业级脚手架

    手把手15分钟搭一个企业级脚手架

    这篇文章主要介绍了手把手15分钟搭一个企业级脚手架,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • js实现遍历含有input的table实例

    js实现遍历含有input的table实例

    这篇文章主要介绍了js实现遍历含有input的table方法,结合实例形式分析了jsp读取数据库动态生成table及JavaScript遍历table的相关技巧,需要的朋友可以参考下
    2015-12-12
  • js数组案例之五子棋游戏

    js数组案例之五子棋游戏

    这篇文章主要为大家详细介绍了js数组案例之五子棋游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05

最新评论