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 相关文章推荐
js的逻辑运算符 ||
May 31 Javascript
用javascript作一个通用向导说明
Aug 30 Javascript
js获取下拉列表的值和元素个数示例
May 07 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
Jun 13 Javascript
Vue实现动态响应数据变化
Apr 28 Javascript
Vue组件中slot的用法
Jan 30 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 Javascript
vue中英文切换实例代码
Jan 21 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中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
python多线程用法实例详解
2015/01/15 Python
python pandas写入excel文件的方法示例
2019/06/25 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
Shell如何接收变量输入
2016/08/06 面试题
教导处工作制度
2014/01/18 职场文书
社区庆中秋节活动方案
2014/02/07 职场文书
出纳担保书范文
2014/04/02 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
运动会拉拉队口号
2014/06/09 职场文书
网络营销计划
2015/01/17 职场文书
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL