今天下午因为要做一个富文本编辑器上传文件给后台,所以看了一下layui的富文本编辑器,折腾了半天,终于把这玩意搞定了。

首先需要先创建layui的富文本编辑器

<textarea id="demo" style="display: none;" lay-verify="content" ></textarea>
layui.use(['element', 'form', 'layer', 'jquery', 'layedit'], function () {
var element = layui.element,
form = layui.form,
layer = layui.layer,
layedit = layui.layedit,
$ = layui.jquery; var index = layedit.build('demo');

引入富文本编辑器以后,需要先对富文本编辑器的信息进行处理,富文本编辑器的获取文本的值有两种类型,一种是纯文本类型的,一种是带标签的,我选择的是第二种,将带标签的值传递给后台

data.field.content = layedit.getContent(index);

将对信息的处理放入通过form.on监听事件中,当点击提交按钮的时候,富文本编辑器会自动获取到文本中的值,这样富文本编辑器当中的内容就成功的提交到后台啦

关于layui富文本编辑器和form表单提交的问题的更多相关文章

  1. summernote富文本编辑器配合validate表单验证无法进行表单提交的问题

    1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http ...

  2. ASP.NET MVC实现layui富文本编辑器应用

    先看看视图层 在视图层,使用的是视图助手--HtmlHelper,代替我们网页中传统的表单标签元素,其中的m代表实体模型.通过视图助手,为我们生成id和name属性相同的textarea标签. 备注: ...

  3. jQuery判断 form表单提交时一些文本框的判断

    一: form表单提交时如果表单里有input标签为空那么不提交form表单. <head> <script type="text/javascript"> ...

  4. 20181019 记录 window.setTimeout('dofunction()',2000); - layui form 表单提交 事件 - F11全屏 事件 window.onresize

    1 延时事件 window.setTimeout('dofunction()',2000); 函数外面要有引号 如果没有引号 就不能延时执行 应该是内容进行eval,所以外层不是传递字符串的话,外层函 ...

  5. Layui form表单提交注意事项

    // 表单提交form.on('submit(first1)', function (data) { var articleFrom = data.field; $.ajax({ type:" ...

  6. jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用

    一.jQuery Form的其他api  1.  formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...

  7. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  8. 前端基础:form表单提交

    今天介绍下form表单提交经常用到的表单元素. 1:datalist元素,一般与input组建配合使用,以定义可能输入的值,例如: <!DOCTYPE html> <html lan ...

  9. ajax传递数组、form表单提交对象数组

    在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致,那么传值就没有什么问题.不过,在前几天的开发 ...

随机推荐

  1. 【转】tars源码漫谈第1篇------tc_loki.h (牛逼哄哄的loki库)

    loki库是C++模板大牛Andrei写的, 里面大量运用模板的特性, 而tc_loki.h借用了loki库的部分代码, 形成了一个基本的文件tc_loki.h, 来看看: #ifndef __TC_ ...

  2. sleep wait yield

    sleep 暂停当前线程,允许低优先级线程获得执行机会,但并不释放对象的锁,进入不可运行状态 yield 类似sleep,但只允许同优先级有获得执行机会,同样也不会释放锁,当前线程仍是可运行状态,因此 ...

  3. Python Flask Restful

    Flask  Restful 1.flask restful 在flask基础上进行一些封装,主要用于实现restful接口 2.restful的理解 1)URI(统一资源标识符):每一个URI代表一 ...

  4. SQL中ON和WHERE的区别(转)

    原文:https://www.cnblogs.com/guanshan/articles/guan062.html 数据库在通过连接两张或多张表来返回记录时,都会生成一张中间的临时表,然后再将这张临时 ...

  5. 什么是span?跨径

    研究zipkin时候,发现有个span的概念 https://segmentfault.com/a/1190000012342007

  6. elasticsearch 之编译过程

    https://github.com/elastic/elasticsearch/blob/master/CONTRIBUTING.md 不同的版本需要指定JDK 可以下载openJDK版本到服务器上 ...

  7. .Net Core部署IIS

    1.环境安装 https://dotnet.microsoft.com/download/dotnet-core 下载Runtime & Hosting Bundle包安装,iis模块会出现支 ...

  8. PHP----------线程安全和非线程安全的介绍

    1.Linux下的PHP,没有线程安全版和非线程安全版之分.从2000年10月20日发布的第一个Windows版的PHP3.0.17开始的都是线程安全的版本,直至5.2.1版本开始有Thread Sa ...

  9. git之push

    git push :将本地的哪个分支推送到哪个远程主机上的哪个分支.因此明确主机.本地分支名.远程分支名这三个要素. git push命令用于将本地分支的更新,推送到远程主机.它的格式与git pul ...

  10. SpringCloud入门之应用程序上下文服务(Spring Cloud Context)详解

    构建分布式系统非常复杂且容易出错.Spring Cloud为最常见的分布式系统模式提供了简单易用的编程模型,帮助开发人员构建弹性,可靠和协调的应用程序.Spring Cloud构建于Spring Bo ...