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 相关文章推荐
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
javascript的内存管理详解
Aug 07 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
JavaScript中数组成员的添加、删除介绍
Dec 30 Javascript
jQuery实现不断闪烁文字的方法
May 15 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 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 分页类(模仿google)-面试题目解答
2009/09/13 PHP
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
php网站地图生成类示例
2014/01/13 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
jquery蒙版控件实现代码
2010/12/08 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
2013/01/07 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
介绍下Lucene建立索引的过程
2016/03/02 面试题
装潢设计实习自我鉴定
2013/09/19 职场文书
C++程序员求职信
2014/05/07 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
科学发展观标语
2014/10/08 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
用Python实现Newton插值法
2021/04/17 Python