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之十一 添加事件核心方法
Jul 31 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
初识Node.js
Sep 03 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
通过javascript实现段落的收缩与展开
Jun 26 Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
javascript实现移动端上传图片功能
Aug 18 Javascript
关于vue的列表图片选中打钩操作
Sep 09 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操作excel文件 基于phpexcel
2010/07/02 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
php判断目录存在的简单方法
2019/09/26 PHP
JS查看对象功能代码
2008/04/25 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
Python Tkinter GUI编程入门介绍
2015/03/10 Python
深入解析Python中的urllib2模块
2015/11/13 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
python基本语法练习实例
2017/09/19 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
pycharm的python_stubs问题
2020/04/08 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
三星印度官网:Samsung印度
2019/08/03 全球购物
Android面试宝典
2013/08/06 面试题
舌尖上的中国观后感
2015/06/02 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
PL350与SW11的比较
2021/04/22 无线电
Mysql中存储引擎的区别及比较
2021/06/04 MySQL
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技