拆分百度编辑器,实现网站评论和图片上传
效果如下:
我们可以通过修改百度编辑器来达到比较美观的效果。图一是将百度编辑器改成一个评论区。图二是只提取百度编辑器的上传图片功能,这比自己写的上传功能美观多了,同时功能也是更为丰富。
对于第一个功能的实现比较容易,可以参看百度编辑器的文档,定制工具图标 。修改ueditor.config.js 37行左右的toolbars,就可以。
同时对于文字字数的限制:可以在257行左右进行设置
- 对于第二个功能的实现,也就是将我们传统的上传图片按钮包装成百度编辑器式:
<!-- 点击按钮的设置,当有点击时间的时候触发函数-->
<input type="text" class="form-control" placeholder="点击按钮选择图片" id="sport-cover" name="sport.cover" autocomplete="off">
<!-- 引入百度编辑器基本配置-->
<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)