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 相关文章推荐
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
ES6数组的扩展详解
Apr 25 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
javascript实现手动点赞效果
Apr 09 Javascript
vue-element-admin 菜单标签失效的解决方式
Nov 12 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
对vuex中store和$store的区别说明
Jul 24 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
盘点被央视点名过的日本动画电影 一部比一部强
2020/03/08 日漫
用PHP 快速生成 Flash 动画的方法
2007/03/06 PHP
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
PHP中date()日期函数有关参数整理
2011/07/19 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
python动态加载变量示例分享
2014/02/17 Python
连接Python程序与MySQL的教程
2015/04/29 Python
python网络编程之数据传输UDP实例分析
2015/05/20 Python
星球大战与Python之间的那些事
2016/01/07 Python
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
python如何读写csv数据
2018/03/21 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
Python reduce函数作用及实例解析
2020/05/08 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
乱丢垃圾袋检讨书
2014/10/08 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
大学班干部竞选稿
2015/11/20 职场文书
Pygame Draw绘图函数的具体使用
2021/11/17 Python