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 相关文章推荐
Backbone.js的一些使用技巧
Jul 01 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
编写React组件项目实践分析
Mar 04 Javascript
vue-cli配置flexible过程详解
Jul 04 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
async/await让异步操作同步执行的方法详解
Nov 01 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 Javascript
vue大型项目之分模块运行/打包的实现
Sep 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+javascript的日历控件
2009/11/19 PHP
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
在Django中实现添加user到group并查看
2019/11/18 Python
python自动点赞功能的实现思路
2020/02/26 Python
python如何变换环境
2020/07/21 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
社区活动总结范文
2015/05/07 职场文书
甲午风云观后感
2015/06/02 职场文书
毕业实习单位意见
2015/06/04 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书