layui富文本编辑器ajax提交

刚好要引入layui的富文本编辑器,post提交的字段获取不到,浪费了好久的时间

有遇到相同的问题的兄弟,希望这对你有帮助。

html部分的代码

<div class="layui-form-item layui-form-text">
<label class="layui-form-label">考核模式</label>
<div class="layui-input-block" style="max-width:600px;">
<textarea placeholder="" class="layui-textarea" name="pattern" id="pattern" lay-verify="pattern" style="display:none"></textarea>
</div>
</div>

script部分代码

<script>

layui.use([‘layer‘, ‘form‘], function () {
var layer = layui.layer,
$ = layui.jquery,
form = layui.form;

layui.use(‘layedit‘, function(){
var layedit = layui.layedit;
var index = layedit.build(‘pattern‘, {height: 140});
/**
* pattern是lay-verify="pattern"(下面的)
* 将富文本里的内容赋值到textarea里面
*/
form.verify({
pattern:function () {
layedit.sync(index);
}
});
form.render();
});

$(window).on(‘load‘, function () {
form.on(‘submit(admin)‘, function (data) {
$.ajax({
url: "{:url(‘admin/xxxx/xxx‘)}",
data: $(‘#admin‘).serialize(),/获取到所有form中提交的
type: ‘post‘,
success: function (res) {
// console.log(res);
// return false;
if (res.code == 1) {
layer.alert(res.msg, function (index) {
location.href = res.url;
})
} else {
layer.msg(res.msg);
}
}
})
return false;
});
});
});

</script>

layui的官方文档路径:https://www.layui.com/doc/modules/layedit.html

原文地址:https://www.cnblogs.com/wth9/p/9779309.html

时间: 2024-08-30 03:47:42

layui富文本编辑器ajax提交的相关文章

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

先看看视图层 在视图层,使用的是视图助手--HtmlHelper,代替我们网页中传统的表单标签元素,其中的m代表实体模型.通过视图助手,为我们生成id和name属性相同的textarea标签. 备注: 在ASP.NET MVC中,能提交表单数据的元素(各种类型的input标签,textarea等),其属性name的值于实体模型中的属性名相同时,传递到控制器中的实体模型或参数,会自动进行映射,方便前端到后台的数据传递. 1 <div class="layui-row"> 2

layui富文本编辑器layedit

上图是官方提供的文档,我看了几次,都没发现有赋值的方法 layedit赋值方法如下/*** 设置编辑器内容* @param {[type]} index 编辑器索引* @param {[type]} content 要设置的内容* @param {[type]} flag 是否追加模式*/layedit.setContent(index, content, flag);flag是true,是追加模式,flag是false,赋值模式 原文地址:https://www.cnblogs.com/Cui

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

1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http://www.cnblogs.com/jingmin/p/6592325.html 2.在使用summernote编辑完文本,使用validate进行表单验证出现问题的解决方案 小编在使用summernote富文本编辑器编辑完文章内容,并且上传了图片,对于编写的内容使用了validate进行了表单验

kindEditor 富文本编辑器 使用介绍

第一版:存放位置:  ---->把该创建的文件包放到javaWeb 过程的 WEB_INF 下:如图所示. 第二步:< kindEditor 插件的引用> :JS引用 1 <script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script> 2 <scrip

百度富文本编辑器

[下载所需资源]---------------------------------------百度搜索-- 百度富文本编辑器--进入首页(百度编辑器-UEditor-首页) 百度编辑器 - UEditor - 首页-- 上方导航[下载]--选择对应的版本下载(我选的是 1.4.3.3 .Net 版本 utf-8版) [把资源引入自己的项目]--------------------------------------- 这里,模拟需求:新建一个项目  MyTest,要使用  富文本编辑器的功能. 

Bootstrap summernote,超级漂亮的富文本编辑器

Bootstrap summernote,用其官网上的介绍就是"Super Simple WYSIWYG editor",不过在我看来,与bootstrap中文官网上提供的"bootstrap-wysiwyg"要更simple,更漂亮,更好用! 虽然我之前尝试过使用bootstrap-wysiwyg,可参照Bootstrap wysiwyg富文本数据如何保存到mysql,但事后诸葛亮的经验告诉我,summernote绝对是更佳的富文本编辑器,这里对其工作team点三

【实践】简洁大方的summernote 富文本编辑器插件的用发——实例篇

实例化后的summernote 是这样子的 很漂亮对吧,而我做成页面效果是这样的: 先说说实例化一个summernote 的方法把,其实也不难,jq 选择器选择一个要变成富文本编辑器的元素然后调用 summernote 方法传入一个对象作为参数便可,参数是一个对象,属性就是这个富文本的一些样式属性,如下: 上面的属性是一些比较常用的属性,更多属性可以查看官方文档.特别注意一点的是callbacks 属性,它的作用是summernote 编辑器里面的一些功能要实现的回调方法,这里我的需求只是上传图

ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork 制作一个添加新闻功能

本文将交大伙怎么集成ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork来制作一个新闻系统 先上截图: 添加页面如下: 下面来看代码部分 列表页如下: 1 @{ 2 Layout = null; 3 } 4 5 <!DOCTYPE html> 6 7 <html> 8 <head> 9 <meta name="viewport" content="width=device-width&qu

summernote富文本编辑器

<!doctype html><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0