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 相关文章推荐
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
微信小程序 video组件详解
Oct 25 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
Vue刷新修改页面中数据的方法
Sep 16 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 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
PHP生成sitemap.xml地图函数
2013/11/13 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
javascript函数中的arguments参数
2010/08/01 Javascript
jquery ui resizable bug解决方法
2010/10/26 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python中的列表推导浅析
2014/04/26 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
python中class的定义及使用教程
2019/09/18 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
Python如何测试stdout输出
2020/08/10 Python
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
酒吧创业计划书
2014/01/18 职场文书
培训自我鉴定
2014/01/31 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
求职信怎么写
2014/05/23 职场文书
个人租房协议书样本
2014/10/01 职场文书
机关作风建设整改方案
2014/10/27 职场文书
2015年质检工作总结
2015/05/04 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
总结几个非常实用的Python库
2021/06/26 Python
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技