百度ueditor富文本--PC端单个，PC端多个，mobile单个，mobile多个
2017-08-08 17:29
447 查看
我们在之前的文章中已经做过富文本插件的调研。
富文本插件
http://fex-team.github.io/ueditor/
比较好用，我们本章详细记录它的应用过程，以及在不同场景下的具体配置。
我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录 ueditor用法。
应用bootstrap模板
基础项目源码下载地址为:SpringMVC+Shiro+MongoDB+BootStrap基础框架
我们在基础项目中已经做好了首页index的访问。
现在就在index.jsp页面和index的路由Controller上做修改，实现 ueditor用法。
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是配置文件，可以在里面调整相关配置和工具栏工具。
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script>
${pic.name}</script>
$(".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。
<%@ 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>
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;
}
}
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
*
*
*/
@Controller
public 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")
@ResponseBody
public JSONResult saveMigrateLine(@RequestBody Pic pic) {
//保存pic记录
//int result = save(pic);
int result =1;
return result > 0 ? JSONResult.success("保存成功")
:JSONResult.error("保存失败!");
}
}
它们的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重复 ，否则页面布局会混乱。
效果如图:
style="width:375px;height:667px;"
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script>
name="content"></script>
$(".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。
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;
}
}
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
*
*
*/
@Controller
public 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")
@ResponseBody
public JSONResult saveMigrateLine(@RequestBody Pic pic) {
//保存pic记录
//int result = save(pic);
int result =1;
return result > 0 ? JSONResult.success("保存成功")
:JSONResult.error("保存失败!");
}
}
效果图
style="width:375px;height:667px;"
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script>
<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>
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'
]]
});
});
}
)
<%@ 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>
其他辅助类参考上文。
效果如图:
富文本插件
Ueditor
是百度推出的一款开源在线 HTML 编辑器。http://fex-team.github.io/ueditor/
比较好用，我们本章详细记录它的应用过程，以及在不同场景下的具体配置。
我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录 ueditor用法。
应用bootstrap模板
基础项目源码下载地址为:SpringMVC+Shiro+MongoDB+BootStrap基础框架
我们在基础项目中已经做好了首页index的访问。
现在就在index.jsp页面和index的路由Controller上做修改，实现 ueditor用法。
下载引用插件
ueditor可以定制，我们这里下载JSP版:http://ueditor.baidu.com/website/download.htmlhttp://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
*
*
*/
@Controller
public 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")
@ResponseBody
public 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
*
*
*/
@Controller
public 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")
@ResponseBody
public 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>
其他辅助类参考上文。
效果如图:
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 记录百度富文本编辑框 UEditor 的一个问题
- 编辑器 UEditor 百度富文本web编辑器
- [软件资讯]百度发布富文本开源编辑器UEditor
- 百度ueditor富文本插件使用
- asp.net集成百度ueditor富文本
- 百度富文本ueditor和umeditor遇到的问题和解决办法
- 百度富文本ueditor 的简单使用
- 百度富文本Ueditor-1.4.3.2-jsp版的使用
- 百度富文本ueditor使用 以及 与 Struts2 整合时出现的问题解决
- UEditor | 百度富文本使用
- 百度UEditor富文本
- 【UEditor】百度UE富文本自定义按钮添加文本
- 百度ueditor富文本--配置图片上传
- opencart 百度登录和百度钱包支付插件 响应式适应pc/mobile
- 百度ueditor富文本--图片保存路径的配置以及上传到远程服务器
- 百度的UEditor富文本控件的使用
- 百度富文本 uEditor 调用不到，解决办法
- 发现个好用的富文本空间百度UEditor
- 百度富文本web编辑器UEditor上传处理部分的改造
- React中使用UEditor百度富文本的方法