自定义ckeditor图片上传插件

最新推荐文章于 2024-05-14 23:27:17 发布

陈劲松

最新推荐文章于 2024-05-14 23:27:17 发布

阅读量7.5k

点赞数 1

分类专栏：前端文章标签： ckeditor

本文链接：https://blog.csdn.net/yiyiwyf/article/details/53364467

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近正在做公司主页的后台管理项目，富文本编辑器选用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>

陈劲松

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
自定义ckeditor图片上传插件

最近正在做公司主页的后台管理项目，富文本编辑器选用ckeditor。头儿觉得ckeditor自带的插入图片插件的界面太复杂不好用，而且还得整合ckfinder才能实现本地上传，于是我想整个自定义的插件。闲来整了个demo。环境：myeclipse步骤如下：1. 在ckeditor目录下的plugins里新建一个文件夹，这里我命名为simpleupload。在新建的文件夹里新建一个plu
复制链接

扫一扫