CmsTop Image Editor 是国内首款用于处理新闻图片的在线编辑器。
§ 效果图
§ 文件
public/admin/uploader/cmstop.uploader.js
public/admin/js/cmstop.filemanager.js
public/admin/imageEditor/cmstop.imageEditor.js
§ 示例代码
<script type="text/javascript" src="uploader/cmstop.uploader.js"></script>
<script type="text/javascript" src="imageEditor/cmstop.imageEditor.js"></script>
<script type="text/javascript" src="js/cmstop.filemanager.js"></script>
<style>
.thumb_cell input { float:left; margin-right:5px;}
.thumb_cell object { display:inline; float:left; margin-right:5px;}
</style>
<div class="thumb_cell">
<input type="text" name="thumb" id="img" size="37" value="" />
<div id="upbtn"></div>
<input class="button_style_1" type="button" id="filebtn" value="图像库" />
<input class="button_style_1" type="button" id="editbtn" value="编辑" />
</div>
<script>
var imgInput = $('#img');
// 给input加浮动图片
img.floatImg({url:UPLOAD_URL,width:200});
// 初始化上传控件
$('#upbtn').imgUploader(function(url){
imgInput.val(url);
});
// 图像库按钮绑定事件
$('#filebtn').click(function(){
ct.fileManager(function(selected){
imgInput.val(selected);
});
});
// 裁剪按钮绑定事件
$('#editbtn').click(function(){
ct.editImage(imgInput.val(),function(url){
imgInput.val(url);
});
});
</script>
如果没有特别的要求，只是实现以上功能 建议使用方法：
$.fn.imageInput
一行代码就可以搞定上面的三个操作的效果。
§ 示例代码
<div class="thumb_cell">
<input type="text" name="thumb" id="img" size="37" value="" />
</div>
<script>
$('#img').imageInput();
</script>
