前述 所有的基础配置太多了,所以就没有介绍,只是给相关的文档地址: bootstrap: 图片上传用的弹框使用的是bootstrap的模态框,相关文档 http://v3.bootcss.
- 前述
所有的基础配置太多了,所以就没有介绍,只是给相关的文档地址:
bootstrap: 图片上传用的弹框使用的是bootstrap的模态框,相关文档 http://v3.bootcss.com/javascript/#modals
美图秀秀:使用的了美图秀秀web图片控件,相关文档下载地址http://open.web.meitu.com/products/
ueditor:我使用的是 开发版[1.4.3.3 Jsp 版本]http://ueditor.baidu.com/website/download.html
- 配置
- 引入:前面的都是组件相关的文件,只是引入了ueditor的配置请根据自己的情况更改,最后一个commons是放我们自己写js的文件
-
<link rel="stylesheet" href="${ctx}/assets/css/bootstrap.min.css"/> -
<script src="${ctx}/assets/js/bootstrap.min.js"></script><script src="${ctx}/assets/ueditor/ueditor.config.js"></script><script src="${ctx}/assets/ueditor/ueditor.all.js"></script> -
<script src="${ctx}/assets/xiuxiu.js"></script><script src="${ctx}/assets/commons.js"></script> - bootstrap全局弹框我写的jsp,所以把这个全局的弹框放到了公共页面上,这个其实没什么就一些html代码
<%--全局图片上传弹框--%><div id="imgwindow3" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> <div class="modal-dialog modal-sm"> <div class="modal-content" style="width:800px;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">图片编辑<span class="img_rule"></span></h4> </div> <div class="modal-body" style="height:600px;"> <div id="imgwindowaltContent3"> </div> </div> </div> </div></div>
- 页面上的富文本框和自定义的图片上传节点
图片上传节点:
<div class="form-group"> <label>图片</label> <div class="imgupload" rule="180,180" id="img" style="height: 180px;width: 180px;"></div> <input type="hidden" name="i_imageid" class="img"></div> (html代码)
$(".imgupload").click(function(){ var rule = $(this).attr("rule"); if(rule != "undefined" && rule != null) { var rule = rule.split(","); $(".img_rule").text("建议使用"+rule[0]+"*"+rule[1]+"的图片"); } $('#imgwindow3').modal({ show:true }); ltServer.flag = this;}); (commonsjs中节点的处理方法) class必须是imgupload
rule:是规定图片的尺寸,这个可以在上传弹框时显示在最上面提示,并可更改为强制限制图片尺寸,也可不指定该属性
id:对应下面input里面的class这俩个必须对应,不然不能将图片上传后的url回写
富文本框:
<div class="form-group"> <label>内容</label> <%--<textarea id="editor1" class="form-control editor"></textarea>--%> <script id="editor1" class="editor" type="text/plain"></script> <input type="hidden" name="c_text" class="editor1"></div> (html)
class必须是editor
跟节点上传类似,都是id对应input的class,注释部分就是ckeditor的方式
if($(".editor").length != 0){ $.each($(".editor"),function(i,n){ // CKEDITOR.replace($(this).attr("id")); //ck的配置方式 var maxsize = $(this).attr("maxsize"); if(maxsize == undefined || maxsize == null || maxsize == ""){ maxsize = 10000; } UE.getEditor($(this).attr("id"),{ maximumWords:maxsize }); })} - 自定义富文本框的上传按钮
ck自定义:
1:在ck的plugins目录下新建updateImage文件夹,在新建plugin.js和updateImage.png图片文件(图片文件可以自己定义)
plugin.js文件编辑如下
(function(){ //Section 1 : 按下自定义按钮时执行的代码 var a= { exec:function(editor){ $('#imgwindow3').modal({ //点击自定义按钮是弹出全局富文本框,这个对应我们上面的bootstrap全局模态框 backdrop:true, keyboard:true, show:true }); for (var instance in CKEDITOR.instances) { //遍历所有的ck节点 if(instance == editor.name) //找到对应的点击的节点并将节点id赋给我们commonjs中的ltServer.instance(后面将会吧这个全局变量帖出来) ltServer.instance = instance; } } }, //Section 2 : 创建自定义按钮、绑定方法 b='updateImage'; CKEDITOR.plugins.add(b,{ init:function(editor){ editor.addCommand(b,a); editor.ui.addButton('updateImage',{ label:'图片文件上传', icon: this.path + 'updateImage.png', command:b }); } }); })(); 编辑ck config.js
CKEDITOR.editorConfig = function( config ) { config.extraPlugins += (config.extraPlugins ? ',updateImage' : 'updateImage'); //添加我们自定义的图片上传按钮 config.extraPlugins += (config.extraPlugins ? ',preview' : 'preview'); //添加自定义的预览功能 config.toolbarGroups = [ { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] }, { name: 'links' }, { name: 'insert' }, { name: 'forms' }, { name: 'tools' }, { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }, { name: 'others' }, '/', { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] }, { name: 'styles' }, { name: 'colors' } ]; config.removeButtons = 'Underline,Subscript,Superscript'; config.format_tags = 'p;h1;h2;h3;pre'; config.removeDialogTabs = 'image:advanced;link:advanced'; CKEDITOR.config.resize_enabled = false;}; ue自定义:
1,编辑config.js文件
toolbars: [[ 'fullscreen', 'source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 'directionalityltr', 'directionalityrtl', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|', 'template', 'background', '|', 'horizontal', 'date', 'time', 'spechars','|', 'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|', 'print', 'preview','|','imgupload','insertvideo','addlink']] //当鼠标放在工具栏上时显示的tooltip提示,留空支持自动多语言配置，否则以配置值为准 ,labelMap:{ 'imgupload':'图片上传', 'addlink' : '超链接' }
2,找到themes/default/css/ueditor.css文件，增加一条样式定义:
.edui-for-imgupload .edui-icon{ background-position:-380px 0px;//我是使用了默认的图片这个对应themes/default/images/icons.png图片的偏移量} 3,编辑我们的commons.js文件
baidu.editor.commands['imgupload'] = { execCommand : function(){ $('#imgwindow3').modal({ show:true }); ltServer.instance = this.key; //获取相应富文本框的id跟前面的ck类似 }, queryCommandState:function(){ }}; - 与美图秀秀集成
1,js全局定义
ltServer = {}; ltServer.content = "";//服务器地址ltServer.server = "http://localhost:8080";//图片上传接口ltServer.imgUpPath = "/common/img/upload";
//富文本框的图片上传焦点位ltServer.instance = null; //用来记录是哪一个富文本框/** * 图片上传时的标记位用来区分倒是是富文本框还是我们的节点 */ltServer.flag = null;
2,美图秀秀配置
$('#imgwindow3').on('show.bs.modal', function () { //bootstrap的模态框显示触发 // xiuxiu.setLaunchVars("cropPresets","1:1"); /*xiuxiu.onInit = function(){ xiuxiu.loadPhoto(false); }*/ xiuxiu.setUploadURL(ltServer.server+ltServer.content+ltServer.imgUpPath); xiuxiu.setUploadType(2); xiuxiu.setUploadDataFieldName("file"); /*第1个参数是加载编辑器div容器，第2个参数是编辑器类型，第3个参数是div容器宽，第4个参数是div容器高*/ xiuxiu.embedSWF("imgwindowaltContent3", 1, "100%", "100%"); xiuxiu.onClose = function(editor) {}; xiuxiu.onUploadResponse = function(data){ var data = jQuery.parseJSON(data); var img = "<img src="+data.data.url+">"; if(data.code == 0){ if(ltServer.flag == null){ //CKEDITOR.instances[ltServer.instance].insertHtml(img); //ck UE.getEditor(ltServer.instance).setContent(img, true); //ue }else{ var classname = $(ltServer.flag).attr("id"); $('.'+classname).val(data.data.id); $('.'+classname).attr("src", data.data.url); img = "<img src="+data.data.url+" style='width:"+$(ltServer.flag).width()+"px;height:" + $(ltServer.flag).height()+"px'>"; $(ltServer.flag).html(img); //插入id值对应的class的节点隐藏表单中 ltServer.flag = null; //清空标记位 } $('#imgwindow3').modal('hide'); //隐藏模态框 } }; xiuxiu.onBeforeUpload = function(data, id) { //上传前大小限制 if(data.size > 1024 * 1024){ $('#imgwindow3').modal('hide'); $.dialog({ title : ltServer.title, content: "图片过大请上传1M以下的图片", }); return false; } return true; } xiuxiu.onClose = function (id) { $('#imgwindow3').modal('hide'); //点击美图秀秀关闭按钮时关闭模态框 }});
最后
$('#imgwindow3').on('hide.bs.modal', function () { ltServer.flag = null; $(".img_rule").text("");}); 这个是点击bootstrap模态框上的关闭按钮时清除标记位,并清除文件大小的设置
贴个效果图
这个是自定义的,最上面有相应的图片大小提示
富文本框
