SSH:利用Struts2+Hibernate4+Spring4+SQLServer框架,搭建一个前后端web网站(4)

释放双眼,带上耳机,听听看~!

拆分百度编辑器,实现网站评论和图片上传


  • 效果如下:

我们可以通过修改百度编辑器来达到比较美观的效果。图一是将百度编辑器改成一个评论区。图二是只提取百度编辑器的上传图片功能,这比自己写的上传功能美观多了,同时功能也是更为丰富。


  • 对于第一个功能的实现比较容易,可以参看百度编辑器的文档,定制工具图标 。修改ueditor.config.js 37行左右的toolbars,就可以。

  • 同时对于文字字数的限制:可以在257行左右进行设置

  • 对于第二个功能的实现,也就是将我们传统的上传图片按钮包装成百度编辑器式:


1
2
3
1<!-- 点击按钮的设置,当有点击时间的时候触发函数-->
2<input type="text" class="form-control" placeholder="点击按钮选择图片" id="sport-cover" name="sport.cover" autocomplete="off">
3

Api文档


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
1<!-- 引入百度编辑器基本配置-->
2<script type="text/javascript" charset="utf-8" src="<%=basePath%>ueditor/ueditor.config.js"></script>
3<script type="text/javascript" charset="utf-8" src="<%=basePath%>ueditor/ueditor.all.min.js"> </script>
4
5<!--利用ueditor的单图的上传 ,定义一个百度编辑器 -->
6<script id="uploadUe" type="text/plain" ></script>
7
8<!--amdin 单图上传cover  -->
9<script type="text/javascript">
10
11    var ue = UE.getEditor('editor');// 一定要先得到百度编辑器容器
12
13    var uploadUe = UE.getEditor('uploadUe');//用于上传图片(sport-cover)
14    var isUploadCover = false;
15    $(function(){
16        uploadUe.ready(function(){
17            uploadUe.setDisabled(['insertimage']);
18            uploadUe.hide();
19            uploadUe.addListener('beforeInsertImage', function (t, arg) {
20                //得到单图片地址    
21                $('#sport-cover').prop('value', arg[0].src);
22                $('#imgPreview').attr('src', arg[0].src);
23                $('#imgPreview').css('height',300);
24                $('#imgPreview').css('width',290);
25                isUploadCover = true;
26             });
27        });    
28    });
29    $('#upImage').click(function () {
30        var myImage = uploadUe.getDialog('insertimage');
31        myImage.open();
32    });
33</script>
34

源码或运行文件及数据库

SSH:利用Struts2+Hibernate4+Spring4+SQLServer框架,搭建一个前后端web网站(1)

SSH:利用Struts2+Hibernate4+Spring4+SQLServer框架,搭建一个前后端web网站(2)

SSH:利用Struts2+Hibernate4+Spring4+SQLServer框架,搭建一个前后端web网站(3)

SSH:利用Struts2+Hibernate4+Spring4+SQLServer框架,搭建一个前后端web网站(5)

给TA打赏
共{{data.count}}人
人已打赏
安全技术

C++ lambda表达式

2022-1-11 12:36:11

安全技术

必须要注意的 C++ 动态内存资源管理(一)——视资源为对象

2022-1-12 12:36:11

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索