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


Posted in Javascript onSeptember 18, 2019

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

Javascript 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
jQuery 动画基础教程
Dec 25 Javascript
基于jquery的模态div层弹出效果
Aug 21 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
详解js闭包
Sep 02 Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 Javascript
js代码实现轮播图
May 04 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 #Javascript
layui复选框限制选择个数的方法
Sep 18 #Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 #Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 #Javascript
Vue Components 数字键盘的实现
Sep 18 #Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 #Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 #Javascript
You might like
Mysql的常用命令
2006/10/09 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
JavaScript 变量命名规则
2009/09/23 Javascript
JavaScript 对象模型 执行模型
2009/12/06 Javascript
Jquery替换已存在于element上的event的方法
2010/03/09 Javascript
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
vue超时计算的组件实例代码
2018/07/09 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
Python装饰器的函数式编程详解
2015/02/27 Python
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
讲解Python中的标识运算符
2015/05/14 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
大韩航空官方网站:Korean Air
2017/10/25 全球购物
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
电脑销售顾问自荐信
2014/01/29 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
2014年党总支工作总结
2014/12/18 职场文书
2016公司年会主持词
2015/07/01 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python