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值的相互传递方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Uploadify上传文件方法
Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示。接下来通过本文给大家介绍Uploadify上传文件方法，涉及到Uploadify在Aspnet中的使用相关知识，本文介绍的非常详细，具有参考借鉴价值，需要的朋友一起学习吧
2016-03-03
uniapp开发微信小程序自定义顶部导航栏功能实例
uni-app是一个使用Vue.js开发跨平台应用的前端框架,下面这篇文章主要给大家介绍了关于uniapp开发微信小程序自定义顶部导航栏功能的相关资料,文中通过图文以及示例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
解析如何利用iframe标签以及js制作时钟
本文对如何利用iframe标签以及js制作时钟进行了全面解析，分步说明，条理清晰，感兴趣的朋友可以看下
2016-12-12
JavaScript如何输出杨辉三角
这篇文章主要介绍了JavaScript如何输出杨辉三角问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
图片上传之FileAPI与NodeJs
本文主要介绍了使得我们处理图片上传更加简单的方法FileAPI。具有很好的参考价值，下面跟着小编一起来看下吧
2017-01-01
使用threejs实现滚动效果的示例代码
某一天我在刷抖音时,看到一个UI设计师分享了一个好看的网页滚动动效设计,那种飘逸流畅的动画效果立刻抓住了我的眼球,我脑海里立刻开始想象用代码如何实现这个效果,所以本文给大家分享了如何使用threejs实现滚动效果,感兴趣的朋友可以参考下
2024-01-01
JavaScript设计模式---单例模式详解【四种基本形式】
这篇文章主要介绍了JavaScript设计模式---单例模式,结合实例形式详细分析了JavaScript设模式中单例模式的四种基本形式定义与使用方法,需要的朋友可以参考下
2020-05-05
js实现华丽的九九乘法表效果
本文主要介绍了js实现华丽的九九乘法表效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
2017-03-03
JavaScript 中的输出数据多种方式
在 JavaScript 中，不像 Java 等语言，它没有任何打印或者输出方法的，在js中通过使用4种方式来输出数据，本文通过实例代码给大家详细介绍，感兴趣的朋友跟随小编一起看看吧
2022-03-03
JavaScript中输出</script>标签的方法
这篇文章主要介绍了JavaScript中输出</script>标签的方法,在一些广告代码中经常会用到这个小技巧,需要的朋友可以参考下
2014-08-08