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 相关文章推荐
jQuery之按钮组件的深入解析
Jun 19 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 Javascript
浅谈ECMAScript6新特性之let、const
Aug 02 Javascript
微信小程序实现滚动消息通知
Feb 02 Javascript
vue-router的HTML5 History 模式设置
Sep 08 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
详解vue2.0模拟后台json数据
May 16 Javascript
vue 实现cli3.0中使用proxy进行代理转发
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
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
优化PHP代码的53条建议
2008/03/27 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
一个用js实现控制台控件的代码
2007/09/04 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
python文字转语音实现过程解析
2019/11/12 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
大专自我鉴定范文
2013/10/01 职场文书
校领导推荐信
2013/11/01 职场文书
后勤主管岗位职责
2014/03/01 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
优秀党员先进材料
2014/12/18 职场文书
开平碉楼导游词
2015/02/06 职场文书
试用期辞职信范文
2015/03/02 职场文书
个人党性锻炼总结
2015/03/05 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
导游词之无锡梅园
2019/11/28 职场文书
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android