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 循环读取JSON数据的代码
Jul 17 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
jquery中插件实现自动添加用户的具体代码
Nov 15 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 Javascript
Javascript 数组排序详解
Oct 22 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
前端性能优化及技巧
May 06 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
vxe-table vue table 表格组件功能
May 26 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
微信小程序获取地理位置及经纬度授权代码实例
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输出不同的心形图案
2016/04/22 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
Python绘制的二项分布概率图示例
2018/08/22 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
python如何实现DES加密
2020/09/21 Python
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
店长岗位职责
2013/11/21 职场文书
医院护士专业个人的求职信
2013/12/09 职场文书
寄语是什么意思
2014/04/10 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
就业导师推荐信范文
2015/03/27 职场文书
单位介绍信格式范文
2015/05/04 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers
Go语言 详解net的tcp服务
2022/04/14 Golang