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 相关文章推荐
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
javascript字母大小写转换的4个函数详解
May 09 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
Jul 22 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
PHP新手上路(十一)
2006/10/09 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
Python中的字符串替换操作示例
2016/06/27 Python
python实现微信远程控制电脑
2018/02/22 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
python中dict使用方法详解
2019/07/17 Python
django下创建多个app并设置urls方法
2020/08/02 Python
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
三星法国官方网站:Samsung法国
2019/10/31 全球购物
Ajxa常见问题都有哪些
2014/03/26 面试题
家长反馈意见及建议
2015/06/03 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL