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 css3实现点击动画弹出表单源码特效
Aug 31 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
react-router中的属性详解
Jun 01 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
vue实现将一个数组内的相同数据进行合并
Nov 07 Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
微信小程序获取地理位置及经纬度授权代码实例
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 读取和编写 XML
2014/11/19 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
读jQuery之三(构建选择器)
2011/06/11 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
Python进行数据科学工作的简单入门教程
2015/04/01 Python
在Python中处理XML的教程
2015/04/29 Python
python数据化运营的重要意义
2019/11/25 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
postman和python mock测试过程图解
2020/02/22 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
Nike瑞士官网:Nike CH
2021/01/18 全球购物
人力资源专员岗位职责
2014/01/30 职场文书
企业年度评优方案
2014/06/02 职场文书
商铺消防安全责任书
2014/07/29 职场文书
公司合作意向书范文
2014/07/30 职场文书
志愿者事迹材料
2014/12/26 职场文书
人与自然观后感
2015/06/16 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python