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 textarea的长度进行验证
May 06 Javascript
jQuery实现列表的全选功能
Mar 18 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
vue打包相关细节整理(小结)
Sep 28 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
微信小程序获取地理位置及经纬度授权代码实例
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
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
用PHP读取超大文件的实例代码
2012/04/01 PHP
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
JavaScript中的原型prototype完全解析
2016/05/10 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
VUE重点问题总结
2018/03/19 Javascript
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
python实现图片变亮或者变暗的方法
2015/06/01 Python
python在不同层级目录import模块的方法
2016/01/31 Python
python生成n个元素的全组合方法
2018/11/13 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
电子商务应届生求职信
2013/11/16 职场文书
自我鉴定四大框架
2014/01/17 职场文书
自行车广告词大全
2014/03/21 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
学风建设演讲稿
2014/09/12 职场文书
大雁塔导游词
2015/02/04 职场文书
搞笑老公保证书
2015/02/26 职场文书
婚宴领导致辞
2015/07/28 职场文书
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB