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展开闭合效果演示代码
Jul 24 Javascript
获得Javascript对象属性个数的示例代码
Nov 21 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
js中arguments对象的深入理解
May 14 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下过滤HTML代码的函数
2007/12/10 PHP
PHP的SQL注入过程分析
2012/01/06 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
python中关于数据类型的学习笔记
2020/07/19 Python
快速创建python 虚拟环境
2020/11/28 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
计算机软件个人的自荐信范文
2013/12/01 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
2014年电厂工作总结
2014/12/04 职场文书
教师个人发展总结
2015/02/11 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
Spring中的@Transactional的工作原理
2022/06/05 Java/Android