SSH：利用Struts2+Hibernate4+Spring4+SQLServer框架，搭建一个前后端web网站（4）

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

---

• 效果如下：

  

  

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

---

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

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

  

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

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

Api文档

<!-- 引入百度编辑器基本配置-->
<script type="text/javascript" charset="utf-8" src="<%=basePath%>ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="<%=basePath%>ueditor/ueditor.all.min.js"> </script>

<!--利用ueditor的单图的上传 ，定义一个百度编辑器 -->
<script id="uploadUe" type="text/plain" ></script>

<!--amdin 单图上传cover  -->
<script type="text/javascript">

    var ue = UE.getEditor('editor');// 一定要先得到百度编辑器容器

    var uploadUe = UE.getEditor('uploadUe');//用于上传图片（sport-cover）
    var isUploadCover = false;
    $(function(){
        uploadUe.ready(function(){
            uploadUe.setDisabled(['insertimage']); 
            uploadUe.hide();
            uploadUe.addListener('beforeInsertImage', function (t, arg) { 
                //得到单图片地址    
                $('#sport-cover').prop('value', arg[0].src);
                $('#imgPreview').attr('src', arg[0].src);
                $('#imgPreview').css('height',300);
                $('#imgPreview').css('width',290);
                isUploadCover = true;
             });
        });     
    });
    $('#upImage').click(function () {
        var myImage = uploadUe.getDialog('insertimage');
        myImage.open();
    });
</script>

源码或运行文件及数据库

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）