百度ueditor富文本--PC端单个，PC端多个，mobile单个，mobile多个
来源：互联网 发布：中邮网络培训学院 编辑：程序博客网 时间：2024/06/05 16:19
我们在之前的文章中已经做过富文本插件的调研。
富文本插件
Ueditor
是百度推出的一款开源在线 HTML 编辑器。
http://fex-team.github.io/ueditor/
比较好用，我们本章详细记录它的应用过程，以及在不同场景下的具体配置。
我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录 ueditor用法。
基础项目源码下载地址为:
SpringMVC+Shiro+MongoDB+BootStrap基础框架
我们在基础项目中已经做好了首页index的访问。
现在就在index.jsp页面和index的路由Controller上做修改，实现 ueditor用法。
下载引用插件
ueditor可以定制，我们这里下载JSP版:
http://ueditor.baidu.com/website/download.html
http://download.csdn.net/detail/q383965374/9887681
下载到的zip包解压后文件如图，使用浏览器打开index.html有完整的demo。
我们在项目中webapp路径下新建一个ueditor文件夹，把解压出来的文件都放入其中，如图:
引用方式如下:
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script>
ueditor.config.js是配置文件，可以在里面调整相关配置和工具栏工具。
PC端单个
我们现在来在index.jsp页面中初始化一个富文本，富文本中录入的内容用于展示在PC端。
引入使用代码
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script>
html中使用占位代码
<script id="name" class="ueditorFlag" name="name" type="text/plain" style="width:100%;height:150px;">${pic.name}</script>初始化代码,使用class名称初始化
// 初始化文本编辑器$(".ueditorFlag").each(function() { var id = this.id; var ue = UE.getEditor(id, { pasteplain: true, /* 纯文本粘贴 */ autoHeightEnabled:false,/* 启用右侧滚轮,默认是true自动长高模式*/ toolbars: [[ 'fullscreen', 'source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'removeformat', '|', 'insertorderedlist', 'insertunorderedlist', 'indent', '|', 'justifyleft', 'justifycenter', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', 'insertimage', '|', 'link', 'unlink' ]] }).addOutputRule(function(root){ // 每次编辑框获取焦点的时候都会自动插入<p><br/></p> 不需要的话我们这里可以处理一下 // 只处理第一个空的段落，后面的段落可能是人为添加 var firstPNode = root.getNodesByTagName("p")[0]; firstPNode && /^\s*(<br\/>\s*)?$/.test(firstPNode.innerHTML()) && firstPNode.parentNode.removeChild(firstPNode); }); console.log('ueditor for ' + id + ' init.');});用法与input一样，即可以form提交也可以js中获取值再提交，传递到后台的参数名称是 name的value。
完整html
<%@ include file="./include/header.jsp"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script> <div id="page-wrapper"> <div id="page-inner"> <div class="row"> <div class="col-md-12"> <h1 class="page-header"> ueditor用法 <small>PC端单个</small> </h1> </div> </div> <!-- /. ROW --> <div class="tab-pane fade active in"> <form id="base"> <div> <h4>名称</h4> <script id="name" class="ueditorFlag" name="name" type="text/plain" style="width:100%;height:150px;">${pic.name}</script> </div> <button type="button" class="btn btn-primary save">保存</button> </form> </div> <!-- /. ROW --> </div> <!-- /. PAGE INNER --> </div> <!-- /. PAGE WRAPPER --> <%@ include file="./include/footer.jsp"%><script type="text/javascript">// 初始化文本编辑器$(".ueditorFlag").each(function() { var id = this.id; var ue = UE.getEditor(id, { pasteplain: true, /* 纯文本粘贴 */ autoHeightEnabled:false,/* 启用右侧滚轮,默认是true自动长高模式*/ toolbars: [[ 'fullscreen', 'source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'removeformat', '|', 'insertorderedlist', 'insertunorderedlist', 'indent', '|', 'justifyleft', 'justifycenter', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', 'insertimage', '|', 'link', 'unlink' ]] }).addOutputRule(function(root){ // 每次编辑框获取焦点的时候都会自动插入<p><br/></p> 不需要的话我们这里可以处理一下 // 只处理第一个空的段落，后面的段落可能是人为添加 var firstPNode = root.getNodesByTagName("p")[0]; firstPNode && /^\s*(<br\/>\s*)?$/.test(firstPNode.innerHTML()) && firstPNode.parentNode.removeChild(firstPNode); }); console.log('ueditor for ' + id + ' init.');});/** * jQuery form 扩展获取数据 */$.fn.formGet = function(opts) {opts = $.extend({}, opts);var data = {}, els = opts.formGroup ? this.find('[form-group="' + opts.formGroup + '"]') : this.find('[name]');if (!els || !els.length) { return data;}var fnSetValue = (function(emptyToNull) { return emptyToNull ? function(obj, propertyChain, value, allowMulti) { value !== '' && _fnObjectSetPropertyChainValue(obj, propertyChain, value, allowMulti) } : _fnObjectSetPropertyChainValue})(opts.emptyToNull);els.each(function() { var $this = $(this), type = $this.attr('type'), name = $this.attr('name'), // 可能为属性链 tag = this.tagName.toLowerCase(); if (tag == 'input') { if (type == 'checkbox') { var v = $(this).val(); if (v == 'on' || !v) { fnSetValue(data, name, $(this).prop('checked')); } else { $(this).prop('checked') && fnSetValue(data, name, v, true); } } else if (type == 'radio') { this.checked && fnSetValue(data, name, $this.val()); } else { fnSetValue(data, name, $this.val()); } } else if ('|select|textarea|'.indexOf('|' + tag + '|') > -1) { fnSetValue(data, name, $this.val()); } else { fnSetValue(data, name, $.trim($this.text())); }});return data;};/** * 内部私有方法 */ var _fnObjectGetPropertyChainValue = function(obj, propertyChain) { /* 获取属性链的值 */ if (!obj) return; if (!propertyChain) return obj; var property, chains = propertyChain.split('.'), i = 0, len = chains.length; for (; (property = chains[i]) && i < len - 1; i++) { if (!obj[property]) return; obj = obj[property]; } return obj[property]; }, _fnObjectSetPropertyChainValue = function(obj, propertyChain, value, allowMulti) { /* 设置属性链的值 */ if (!obj || !propertyChain) return; var property, chainObj = obj, chains = propertyChain.split('.'), i = 0, len = chains.length; for (; (property = chains[i]) && i < len - 1; i++) { if (!chainObj[property]) { chainObj[property] = {}; } chainObj = chainObj[property]; } // 改进版：checkbox的多选可以组合为数组 if (!allowMulti || chainObj[property] === undefined) { chainObj[property] = value; } else { var pv = chainObj[property]; if ($.isArray(pv)) { pv.push(value); } else { chainObj[property] = [pv, value]; } } return obj; }; $(document).ready(function () { /*END-保存表单-END*/ $('button.save').on('click', function () { debugger; var data = $('#base').formGet(); $.ajax({ type: "POST", url: "/pic/save", contentType: "application/json", data: JSON.stringify(data), success: function (result) { console.log(result); if (!result.code) { alert(result.data); } else { alert(result.msg); } }, error: function (result) { alert("出错了，请稍后重试"); } }); }); });</script></body></html>辅助实体和路由
Pic.java
package com.test.domain.entity;import java.util.List;public class Pic {private String id;private String name;private String description;private List<String> tags;//标签public String getId() {return id;}public void setId(String id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getDescription() {return description;}public void setDescription(String description) {this.description = description;}public List<String> getTags() {return tags;}public void setTags(List<String> tags) {this.tags = tags;}}IndexController.java
package com.test.web.controller;import java.io.IOException;import java.util.ArrayList;import java.util.List;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import com.test.domain.entity.Pic;import com.test.util.JSONResult;/** * IndexController * * */@Controllerpublic class IndexController {@RequestMapping("/")public String index(Model model) throws IOException { model.addAttribute("hostname", "http://127.0.0.1:8080/"); Pic pic=new Pic(); List<String> tags=new ArrayList<String>(); pic.setName("name"); pic.setDescription("描述"); tags.add("足球"); tags.add("棒球"); tags.add("篮球"); pic.setTags(tags); model.addAttribute("pic", pic);return "/index";}@RequestMapping("/pic/save")@ResponseBodypublic JSONResult saveMigrateLine(@RequestBody Pic pic) {//保存pic记录//int result = save(pic);int result =1;return result > 0 ? JSONResult.success("保存成功"):JSONResult.error("保存失败!");}}
PC端多个
因为我们这里是使用class进行初始化的,所以要增加多一个输入框的时候非常简单，只需要增加一个 同样class的占位代码即可。如下:
它们的class都是ueditorFlag。
<h4>名称</h4> <script id="name" class="ueditorFlag" name="name" type="text/plain" style="width:100%;height:150px;">${pic.name}</script> <h4>描述</h4> <script id="description" class="ueditorFlag" name="description" type="text/plain" style="width:100%;height:150px;">${pic.description}</script>需要注意的是 使用多个script作为占位时，script的id不能与html中的其他元素 id重复 ，否则页面布局会混乱。
mobile单个
之前的单个和多个都是针对PC版使用时的初始化，现在微信公众号文章和手机端的编辑也是很常用的。 为了可以在页面上更真实的模拟 文本在mobile上的显示是否美观，我们对ueditor的样式在初始化时进行了一些样式调整。 尤其是加上宽度的限制即可。
style="width:375px;height:667px;"
引入使用代码
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script>
html中使用占位代码
<script id="content" class="ueditorFlag" type="text/plain" style="width:375px;height:667px;" name="content"></script>
初始化代码,使用class名称初始化
function () { $(".ueditorFlag").each(function () { //实例化编辑器 var ue = UE.getEditor(this.id, { pasteplain: true, /* 纯文本粘贴 */ toolbars: [[ 'fullscreen', 'source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', /*'selectall', 'cleardoc',*/ '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'fontsize', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', '|', 'link', 'unlink', /*'anchor'*/, '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|', 'insertimage', 'preview', '|', 'foreword', 'subhead', 'body', 'caption', 'stress', 'quote' ]], iframeCssUrl: "/ueditor/themes/ancestry.css" }); ue.ready(function() { ue.setContent('${pic.description}'); }); }); }用法与input一样，即可以form提交也可以js中获取值再提交，传递到后台的参数名称是 name的value。
完整html
<%@ include file="./include/header.jsp"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script> <div id="page-wrapper"> <div id="page-inner"> <div class="row"> <div class="col-md-12"> <h1 class="page-header"> ueditor用法 <small>mobile端单个</small> </h1> </div> </div> <!-- /. ROW --> <div class="tab-pane fade active in"> <form id="base"> <div> <h4>内容</h4> <script id="content" class="ueditorFlag" type="text/plain" style="width:375px;height:667px;" name="content"></script> </div> <button type="button" class="btn btn-primary save">保存</button> </form> </div> <!-- /. ROW --> </div> <!-- /. PAGE INNER --> </div> <!-- /. PAGE WRAPPER --> <%@ include file="./include/footer.jsp"%><script type="text/javascript">$(document).ready( function () { $(".ueditorFlag").each(function () { //实例化编辑器 var ue = UE.getEditor(this.id, { pasteplain: true, /* 纯文本粘贴 */ toolbars: [[ 'fullscreen', 'source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', /*'selectall', 'cleardoc',*/ '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'fontsize', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', '|', 'link', 'unlink', /*'anchor'*/, '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|', 'insertimage', 'preview', '|', 'foreword', 'subhead', 'body', 'caption', 'stress', 'quote' ]], iframeCssUrl: "/ueditor/themes/ancestry.css" }); ue.ready(function() { ue.setContent('${pic.description}'); }); }); })/** * jQuery form 扩展获取数据 */$.fn.formGet = function(opts) {opts = $.extend({}, opts);var data = {}, els = opts.formGroup ? this.find('[form-group="' + opts.formGroup + '"]') : this.find('[name]');if (!els || !els.length) { return data;}var fnSetValue = (function(emptyToNull) { return emptyToNull ? function(obj, propertyChain, value, allowMulti) { value !== '' && _fnObjectSetPropertyChainValue(obj, propertyChain, value, allowMulti) } : _fnObjectSetPropertyChainValue})(opts.emptyToNull);els.each(function() { var $this = $(this), type = $this.attr('type'), name = $this.attr('name'), // 可能为属性链 tag = this.tagName.toLowerCase(); if (tag == 'input') { if (type == 'checkbox') { var v = $(this).val(); if (v == 'on' || !v) { fnSetValue(data, name, $(this).prop('checked')); } else { $(this).prop('checked') && fnSetValue(data, name, v, true); } } else if (type == 'radio') { this.checked && fnSetValue(data, name, $this.val()); } else { fnSetValue(data, name, $this.val()); } } else if ('|select|textarea|'.indexOf('|' + tag + '|') > -1) { fnSetValue(data, name, $this.val()); } else { fnSetValue(data, name, $.trim($this.text())); }});return data;};/** * 内部私有方法 */ var _fnObjectGetPropertyChainValue = function(obj, propertyChain) { /* 获取属性链的值 */ if (!obj) return; if (!propertyChain) return obj; var property, chains = propertyChain.split('.'), i = 0, len = chains.length; for (; (property = chains[i]) && i < len - 1; i++) { if (!obj[property]) return; obj = obj[property]; } return obj[property]; }, _fnObjectSetPropertyChainValue = function(obj, propertyChain, value, allowMulti) { /* 设置属性链的值 */ if (!obj || !propertyChain) return; var property, chainObj = obj, chains = propertyChain.split('.'), i = 0, len = chains.length; for (; (property = chains[i]) && i < len - 1; i++) { if (!chainObj[property]) { chainObj[property] = {}; } chainObj = chainObj[property]; } // 改进版：checkbox的多选可以组合为数组 if (!allowMulti || chainObj[property] === undefined) { chainObj[property] = value; } else { var pv = chainObj[property]; if ($.isArray(pv)) { pv.push(value); } else { chainObj[property] = [pv, value]; } } return obj; }; $(document).ready(function () { /*END-保存表单-END*/ $('button.save').on('click', function () { debugger; var data = $('#base').formGet(); $.ajax({ type: "POST", url: "/pic/save", contentType: "application/json", data: JSON.stringify(data), success: function (result) { console.log(result); if (!result.code) { alert(result.data); } else { alert(result.msg); } }, error: function (result) { alert("出错了，请稍后重试"); } }); }); });</script></body></html>辅助实体和路由
Pic.java
package com.test.domain.entity;import java.util.List;public class Pic {private String id;private String name;private String description;private List<String> tags;//标签public String getId() {return id;}public void setId(String id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getDescription() {return description;}public void setDescription(String description) {this.description = description;}public List<String> getTags() {return tags;}public void setTags(List<String> tags) {this.tags = tags;}}IndexController.java
package com.test.web.controller;import java.io.IOException;import java.util.ArrayList;import java.util.List;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import com.test.domain.entity.Pic;import com.test.util.JSONResult;/** * IndexController * * */@Controllerpublic class IndexController {@RequestMapping("/")public String index(Model model) throws IOException { model.addAttribute("hostname", "http://127.0.0.1:8080/"); Pic pic=new Pic(); List<String> tags=new ArrayList<String>(); pic.setName("name"); pic.setDescription("描述"); tags.add("足球"); tags.add("棒球"); tags.add("篮球"); pic.setTags(tags); model.addAttribute("pic", pic);return "/index";}@RequestMapping("/pic/save")@ResponseBodypublic JSONResult saveMigrateLine(@RequestBody Pic pic) {//保存pic记录//int result = save(pic);int result =1;return result > 0 ? JSONResult.success("保存成功"):JSONResult.error("保存失败!");}}效果图
mobile多个
mobile多个跟PC多个一样，使用class来初始化即可。 给每个编辑框限制宽度。
style="width:375px;height:667px;"
引用插件
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script>
html占位
<div class="tab-pane fade active in"> <form id="base"> <div> <h4>内容</h4> <script id="name" class="ueditorFlag" type="text/plain" style="width:375px;height:667px;" name="name">${pic.name}</script> </div> <div> <h4>描述</h4> <script id="description" class="ueditorFlag" type="text/plain" style="width:375px;height:667px;" name="description">${pic.description}</script> </div> <button type="button" class="btn btn-primary save">保存</button> </form> </div> 初始化代码
$(document).ready( function () { $(".ueditorFlag").each(function () { //实例化编辑器 var ue = UE.getEditor(this.id, { pasteplain: true, /* 纯文本粘贴 */ toolbars: [[ 'fullscreen', 'source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', /*'selectall', 'cleardoc',*/ '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'fontsize', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', '|', 'link', 'unlink', /*'anchor'*/, '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|', 'insertimage', 'preview', '|', 'foreword', 'subhead', 'body', 'caption', 'stress', 'quote' ]] }); }); })完整html代码
<%@ include file="./include/header.jsp"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script> <div id="page-wrapper"> <div id="page-inner"> <div class="row"> <div class="col-md-12"> <h1 class="page-header"> ueditor用法 <small>mobile端多个</small> </h1> </div> </div> <!-- /. ROW --> <div class="tab-pane fade active in"> <form id="base"> <div> <h4>内容</h4> <script id="name" class="ueditorFlag" type="text/plain" style="width:375px;height:667px;" name="name">${pic.name}</script> </div> <div> <h4>描述</h4> <script id="description" class="ueditorFlag" type="text/plain" style="width:375px;height:667px;" name="description">${pic.description}</script> </div> <button type="button" class="btn btn-primary save">保存</button> </form> </div> <!-- /. ROW --> </div> <!-- /. PAGE INNER --> </div> <!-- /. PAGE WRAPPER --> <%@ include file="./include/footer.jsp"%><script type="text/javascript">$(document).ready( function () { $(".ueditorFlag").each(function () { //实例化编辑器 var ue = UE.getEditor(this.id, { pasteplain: true, /* 纯文本粘贴 */ toolbars: [[ 'fullscreen', 'source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', /*'selectall', 'cleardoc',*/ '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'fontsize', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', '|', 'link', 'unlink', /*'anchor'*/, '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|', 'insertimage', 'preview', '|', 'foreword', 'subhead', 'body', 'caption', 'stress', 'quote' ]] }); }); })/** * jQuery form 扩展获取数据 */$.fn.formGet = function(opts) {opts = $.extend({}, opts);var data = {}, els = opts.formGroup ? this.find('[form-group="' + opts.formGroup + '"]') : this.find('[name]');if (!els || !els.length) { return data;}var fnSetValue = (function(emptyToNull) { return emptyToNull ? function(obj, propertyChain, value, allowMulti) { value !== '' && _fnObjectSetPropertyChainValue(obj, propertyChain, value, allowMulti) } : _fnObjectSetPropertyChainValue})(opts.emptyToNull);els.each(function() { var $this = $(this), type = $this.attr('type'), name = $this.attr('name'), // 可能为属性链 tag = this.tagName.toLowerCase(); if (tag == 'input') { if (type == 'checkbox') { var v = $(this).val(); if (v == 'on' || !v) { fnSetValue(data, name, $(this).prop('checked')); } else { $(this).prop('checked') && fnSetValue(data, name, v, true); } } else if (type == 'radio') { this.checked && fnSetValue(data, name, $this.val()); } else { fnSetValue(data, name, $this.val()); } } else if ('|select|textarea|'.indexOf('|' + tag + '|') > -1) { fnSetValue(data, name, $this.val()); } else { fnSetValue(data, name, $.trim($this.text())); }});return data;};/** * 内部私有方法 */ var _fnObjectGetPropertyChainValue = function(obj, propertyChain) { /* 获取属性链的值 */ if (!obj) return; if (!propertyChain) return obj; var property, chains = propertyChain.split('.'), i = 0, len = chains.length; for (; (property = chains[i]) && i < len - 1; i++) { if (!obj[property]) return; obj = obj[property]; } return obj[property]; }, _fnObjectSetPropertyChainValue = function(obj, propertyChain, value, allowMulti) { /* 设置属性链的值 */ if (!obj || !propertyChain) return; var property, chainObj = obj, chains = propertyChain.split('.'), i = 0, len = chains.length; for (; (property = chains[i]) && i < len - 1; i++) { if (!chainObj[property]) { chainObj[property] = {}; } chainObj = chainObj[property]; } // 改进版：checkbox的多选可以组合为数组 if (!allowMulti || chainObj[property] === undefined) { chainObj[property] = value; } else { var pv = chainObj[property]; if ($.isArray(pv)) { pv.push(value); } else { chainObj[property] = [pv, value]; } } return obj; }; $(document).ready(function () { /*END-保存表单-END*/ $('button.save').on('click', function () { debugger; var data = $('#base').formGet(); $.ajax({ type: "POST", url: "/pic/save", contentType: "application/json", data: JSON.stringify(data), success: function (result) { console.log(result); if (!result.code) { alert(result.data); } else { alert(result.msg); } }, error: function (result) { alert("出错了，请稍后重试"); } }); }); });</script></body></html>其他辅助类参考上文。
效果如图:
阅读全文
0 0
- 百度ueditor富文本--PC端单个，PC端多个，mobile单个，mobile多个
- 百度UEditor富文本
- pc 连接 windows mobile
- 同步编辑pc mobile
- 检测PC端和mobile端
- 百度富文本编辑器UEditor
- 百度富文本编辑器UEditor
- UEditor | 百度富文本使用
- 富文本编辑器百度ueditor
- 百度富文本编辑器UEditor
- 判断PC/Mobile设备类型
- JS判断mobile和pc
- 单个页面显示多个Ueditor编辑器方法
- 用WINRAR制作Windows Mobile软件PC端安装包
- 用WINRAR制作Windows Mobile软件PC端安装包
- Windows CE,Windows Mobile在PC端的操作.
- 判断终端是pc还是mobile,返回值为number,0为pc,1为mobile,pc&mobile
- asp.net集成百度ueditor富文本
- CDOJ1590-dfs+树链剖分（2017 UESTC Training for Data Structures O）
- Window 对象
- 利用递归求n以内的素数之和
- 位操作-leetcode 401. Binary Watch
- Android中EditText限制仅允许输入汉字/仅允许汉字和数字
- 百度ueditor富文本--PC端单个，PC端多个，mobile单个，mobile多个
- win7 codeblock在调用boost::thread遇到的错误——解决办法
- 我的第一个Hbuilder项目（WEB)
- 照片人脸建模
- Linux 升级 Python 至 3.x
- 我的第一个hbuilder项目
- You may need an appropriate loader to handle this file type
- 不同字符编码转换（UTF8 UNICODE ANSI）
- 基于HTML5的五子棋游戏
