富⽂本wangEditor前后端交互例⼦
之前看了很多 但都不是很详细，这次贴上的代码，希望新⼿能少⾛弯路，与君共勉
参考⽂献
主要引⼊： <script type="text/javascript" src="../static/js/wangEditor.min.js"></script>
官⽅⽂档中都有，没⽤的可以⾃⾏删除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H+ 后台主题UI框架 - 富⽂本编辑器</title>
<meta name="keywords" content="H+后台主题，后台bootstrap框架，会员中⼼主题，后台HTML，响应式后�?">
<meta name="description" content="H+是⼀个完全响应式，基于Bootstrap3�?新版本开发的扁平化主题，她采⽤了主流的左右两栏式布局，使⽤了Html5+CSS3等
<link rel="shortcut icon" href="favicon.ico"> <link href="../static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="../static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="../static/css/animate.css" rel="stylesheet">下载空白简历免费下载
<link href="../static/css/plugins/summernote/summernote.css" rel="stylesheet">
<link href="../static/css/plugins/summernote/summernote-bs3.css" rel="stylesheet">
<link href="../static/css/style.css?v=4.1.0" rel="stylesheet">
<script src="../static/js/jquery.min.js?v=2.1.4"></script>
<script src="../static/js/bootstrap.min.js?v=3.3.6"></script>
<!-- Peity -->
<script src="../static/js/plugins/peity/jquery.peity.min.js"></script>
<script type="text/javascript" src="../static/js/wangEditor.min.js"></script>
</head>
<body class="gray-bg">
<div>
<span class="col-lg-8" id="editor"></span>
</div>
<div>
<button id="btn2">获取text</button>
</div>
<script type="text/javascript">
var E = window.wangEditor;
var editor = new E('#editor');
//ate();
// ⾃定义菜单配置
us = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // ⽂字颜⾊
'backColor', // 背景颜⾊
'link', // 插⼊链接
year函数计算工龄的用法'list', // 列表
'justify', // 对齐⽅式
'quote', // 引⽤
'emoticon', // 表情
'image', // 插⼊图⽚
'table', // 表格
'table', // 表格
'video', // 插⼊视频
'code', // 插⼊代码
'undo', // 撤销
'redo' // 重复
];
//editor.customConfig.uploadImgServer = '/admin.php/Upload/wang_editor'; // 上传图⽚到服务器 //editor.customConfig.uploadImgServer = '/upload';
editor.customConfig.uploadImgShowBase64 = true; // 使⽤ base64 保存图⽚
// 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
// 限制⼀次最多上传 5 张图⽚
editor.customConfig.uploadImgMaxLength = 1;
// ⾃定义⽂件名
editor.customConfig.uploadFileName = 'editor_img';
// 将 timeout 时间改为 3s
editor.customConfig.uploadImgTimeout = 5000;
editor.customConfig.uploadImgHooks = {
before: function (xhr, editor, files) {
// 图⽚上传之前触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图⽚⽂件
/
/ 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表⽰⽤户放弃上传
// return {
// prevent: true,
// msg: '放弃上传'
// }
// alert("前奏");
},
success: function (xhr, editor, result) {
// 图⽚上传并返回结果，图⽚插⼊成功之后触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
// var url = result.data.url;
/
/ alert(JSON.stringify(url));
// append(url);
// alert("成功");
},
fail: function (xhr, editor, result) {
// 图⽚上传并返回结果，但图⽚插⼊错误时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
alert("失败");
},
error: function (xhr, editor) {
// 图⽚上传出错时触发
/
/ xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
// alert("错误");
},
// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使⽤该配置
// （但是，服务器端返回的必须是⼀个 JSON 格式字符串否则会报错）
customInsert: function (insertImg, result, editor) {
// 图⽚上传并返回结果，⾃定义插⼊图⽚的事件（⽽不是编辑器⾃动插⼊图⽚）
// insertImg 是插⼊图⽚的函数，editor 是编辑器对象，result 是服务器端返回的结果
// 举例：假如上传图⽚成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插⼊图⽚： var url = result.data[0];
insertImg(url);
// result 必须是⼀个 JSON 格式字符串否则报错
}
}
//获取⽂本输⼊的内容
var content = html();
console.log(content);
// 读取 text
var announcement_mag = ();
alert(announcement_mag)
$.ajax({
url : "localhost:8080/User/inserAnnouncements?announcement_mag="+announcement_mag, type : "post",
dataType : "json",
success : function(data) {
sult);
},
error : function(msg) {
alert("ajax连接异常：" + msg);
}
});
}, false)
</script>
</body>
</html>
效果
后台：
/*
* 新增公告信息
*/
@RequestMapping(value = "/inserAnnouncements")
transport的固定搭配@ResponseBody
public Map<String, Object> inserAnnouncements(String announcement_mag) {
Map<String, Object> map = new HashMap<String, Object>();
Announcement announcement = new Announcement();
announcement.setAnnouncement_mag(announcement_mag);
try {
int insertUser = userservice.inserAnnouncement(announcement);
} catch (Exception e) {
map.put("result", "false");
e.printStackTrace();
java中bean是什么东西}
map.put("result", "true");
System.out.("result"));
return map;
}
在富⽂本中输⼊⽂字：点击提交
数据库字段如下图：
添加成功
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
2019.4.1
继续完善插⼊图⽚回显到富⽂本jquery下载文件插件
测试使⽤的是spring boot框架
代码：
<!DOCTYPE html>
网站编辑工具<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H+ 后台主题UI框架 - 富⽂本编辑器</title>
<meta name="keywords" content="H+后台主题，后台bootstrap框架，会员中⼼主题，后台HTML，响应式后�?">
<meta name="description" content="H+是⼀个完全响应式，基于Bootstrap3�?新版本开发的扁平化主题，她采⽤了主流的左右两栏式布局，使⽤了Html5+CSS3等
<meta name="description" content="H+是⼀个完全响应式，基于Bootstrap3�?新版本开发的扁平化主题，她采⽤了主流的左右两栏式布局，使⽤了Html5+CSS3等
<link rel="shortcut icon" href="favicon.ico"> <link href="../static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="../static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="../static/css/animate.css" rel="stylesheet">
<link href="../static/css/plugins/summernote/summernote.css" rel="stylesheet">
<link href="../static/css/plugins/summernote/summernote-bs3.css" rel="stylesheet">
<link href="../static/css/style.css?v=4.1.0" rel="stylesheet">
<script src="../static/js/jquery.min.js?v=2.1.4"></script>
<script src="../static/js/bootstrap.min.js?v=3.3.6"></script>
<!-- Peity -->
<script src="../static/js/plugins/peity/jquery.peity.min.js"></script>
<script type="text/javascript" src="../static/js/wangEditor.min.js"></script>
</head>
<body class="gray-bg">
<div>
<span class="col-lg-8" id="editor"></span>
</div>
<div>
<button id="btn2">获取text</button>
</div>
<script type="text/javascript">
var E = window.wangEditor;
var editor = new E('#editor');
// 配置服务器端地址
//editor.customConfig.uploadImgServer = '/upload'
editor.customConfig.uploadImgServer = 'localhost:8080/User/selectJpgUrl';
//ate();
// ⾃定义菜单配置
us = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // ⽂字颜⾊
'backColor', // 背景颜⾊
'link', // 插⼊链接
'list', // 列表
'justify', // 对齐⽅式
'quote', // 引⽤
'emoticon', // 表情
'image', // 插⼊图⽚
'table', // 表格
'video', // 插⼊视频
'code', // 插⼊代码
'undo', // 撤销
'redo' // 重复
];
//editor.customConfig.uploadImgServer = '/admin.php/Upload/wang_editor'; // 上传图⽚到服务器
editor.customConfig.uploadImgShowBase64 = true; // 使⽤ base64 保存图⽚
// 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
// 限制⼀次最多上传 5 张图⽚
editor.customConfig.uploadImgMaxLength = 1;
//⾃定义⽂件名
editor.customConfig.uploadFileName = 'myFileName'
/
/ ⾃定义⽂件名
//editor.customConfig.uploadFileName = 'editor_img';
// 将 timeout 时间改为 3s
editor.customConfig.uploadImgTimeout = 50000;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论