ckeditor,ueditor 自定义图片上传

摘要: 支持单页面多个富文本框,页面中其他多节点图片上传

前述

所有的基础配置太多了,所以就没有介绍,只是给相关的文档地址:

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模态框上的关闭按钮时清除标记位,并清除文件大小的设置

贴个效果图

这个是自定义的,最上面有相应的图片大小提示



富文本框