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 相关文章推荐
javascript css styleFloat和cssFloat
Mar 15 Javascript
jquery图片上下tab切换效果
Mar 18 Javascript
Javascript查询DBpedia小应用实例学习
Mar 07 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
vue 子组件修改data或调用操作
Aug 07 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程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
Python中变量交换的例子
2014/08/25 Python
浅谈python多线程和队列管理shell程序
2015/08/04 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
python 同时读取多个文件的例子
2019/07/16 Python
python sorted方法和列表使用解析
2019/11/18 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
求职简历推荐信范文
2013/12/02 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
保洁员岗位职责
2015/02/04 职场文书
Python数据结构之队列详解
2022/03/21 Python
关于EntityWrapper的in用法
2022/03/22 Java/Android
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫
Python中itertools库的四个函数介绍
2022/04/06 Python