最近正在做公司主页的后台管理项目,富文本编辑器选用ckeditor。头儿觉得ckeditor自带的插入图片插件的界面太复杂不好用,而且还得整合ckfinder才能实现本地上传,于是我想整个自定义的插件。闲来整了个demo。
环境:myeclipse
步骤如下:
1. 在ckeditor目录下的plugins里新建一个文件夹,这里我命名为simpleupload。在新建的文件夹里新建一个plugin.js,并放入自定义的图标。
2. 编辑plugin.js
(function () {
var a = {
exec: function (editor) {
//调用jsp中的函数弹出上传框,
show();
}
},
b = 'simpleupload';
CKEDITOR.plugins.add(b, {
init: function (editor) {
editor.addCommand(b, a);
editor.ui.addButton('simpleupload', {
label: '添加图片', //鼠标悬停在插件上时显示的名字
icon: 'plugins/simpleupload/image.png', //自定义图标的路径
command: b
});
}
});
})();
3. 编辑ckeditor目录下的config.js
自定义simpleupload,并将原本的图片上传改为simpleupload
config.toolbar_default = [
['Source','-','Templates','Preview'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],['ShowBlocks'],['simpleupload','Capture','Flash'],['Maximize'],
'/',
['Bold','Italic','Underline','Strike','-'],
['Subscript','Superscript','-'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor']
];
config.extraPlugins = 'simpleupload';
config.toolbar = 'default';
4. jsp页面
这里用到了pop-layer.js,用来实现弹出框效果;用到了jquery-form.js,用来实现ajax上传文件;
先来几个效果图
这里将input隐藏起来,用一个div覆盖。上传图片后div的内容会被替换为预览图。然后点击确定插入图片
<html>
<head>
<title>cktest</title>
<style>
.div1{
float: left;
height: 150px;
background: #ffffcc;
width: 180px;
position: relative;
line-height: 130px;
}
.div2{
text-align:center;
padding-top:12px;
font-size:15px;
font-weight:800
}
.inputstyle{
width: 180px;
height: 150px;
cursor: pointer;
font-size: 30px;
outline: medium none;
position: absolute;
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
left:0px;
top: 72px;
}
#upcontainer {
height:185px;
width:180px;
background-color:white;
}
</style>
</head>
<body>
<!-- ckeditor -->
<form id="form1">
<textarea rows="30" cols="50" name="editor01"></textarea>
<button type="button" οnclick="sub()" class="btn btn-primary" style="float:right;margin-right:50px;margin-top:20px;">提交</button>
<script type="text/javascript">
editor = CKEDITOR.replace('editor01');
</script>
</form>
<!--上传弹框 -->
<div id="trig" style="display:none;"></div>
<div id="upcontainer">
<form id="form2">
<div class="div1" id="div1">
<div class="div2">点击上传图片</div>
<input type="file" class="inputstyle" id="sub" name="file">
</div>
</form>
<button type="button" style="margin-top:5px;margin-left:42px;" οnclick="insert()">确定</button>
<button type="button" style="margin-top:5px;" id="close">关闭</button>
</div>
<script>
$(document).ready(function () {
var bodyWidth = document.body.offsetWidth; //获取body宽度
// 弹窗
layer = new PopupLayer({ trigger: "#trig", popupBlk: "#upcontainer", closeBtn: "#close", useOverlay: true, offsets: { x: bodyWidth/2-90, y: 80} });
// 监听input的change,一旦选中图片就自动上传
$("#sub").change(function () {
$("#form2").ajaxSubmit({
url: '${ctx}/bg/cktest/uploadImg' ,
type: 'POST',
dataType: 'json',
success: function (returndata) {
// 上传成功则将图片插入预览框
reset = $("#div1").html();
$("#div1").html("<img src='" + returndata.imgPath + "' style='width:180px;height:150px;'/>");
imgPath = "<img src='" + returndata.imgPath + "'/>";
},
error: function (returndata) {
alert(returndata);
}
});
})
});
function show() {
$("#trig")[0].click();
}
function close() {
$("#close")[0].click();
}
function insert() {
if (imgPath) {
// 将图片插入编辑器
$("#div1").html(reset);
CKEDITOR.instances.editor01.insertHtml(imgPath);
var index = layer.index;
layer.close(index);
} else {
return;
}
}
</script>
</body>
</html>