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应该如何来设置改变按钮input的onclick事件
Dec 10 Javascript
js中for in的用法示例解析
Dec 25 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
js+html获取系统当前时间
Nov 10 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 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
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
JavaScript 变量基础知识
2009/11/07 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
JS实现鼠标移动拖尾
2020/12/27 Javascript
Python 内置函数complex详解
2016/10/23 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
Jupyter中直接显示Matplotlib的图形方法
2018/05/24 Python
python3实现基于用户的协同过滤
2018/05/31 Python
python 调用有道api接口的方法
2019/01/03 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
你常见到的runtime exception
2016/09/05 面试题
上课随便讲话检讨书
2014/09/12 职场文书
终止劳动合同协议书
2014/10/05 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
python读取mnist数据集方法案例详解
2021/09/04 Python
MySQL 字符集 character
2022/05/04 MySQL