/******************************************************************************* * KindEditor - WYSIWYG HTML Editor for Internet * Copyright (C) 2006-2011 kindsoft.net * * @author Roddy <luolonghao@gmail.com> * @site http://www.kindsoft.net/ * @licence http://www.kindsoft.net/license.php *******************************************************************************/ KindEditor.plugin('graft', function(K) { var self = this, name = 'graft', uploadJson = K.undef(self.uploadJson, self.basePath + 'php/upload_json.php'), allowUploadGraft = K.undef(self.allowUploadGraft, true), lang = self.lang(name + '.'); if(typeof jQuery == 'undefined') { K.options.errorMsgHandler(lang.depJQueryError, "error"); return; } else { K.loadStyle(K.options.pluginsPath+"graft/css/scrawl.css"); K.loadScript(K.options.pluginsPath+"graft/scrawl.js"); } self.plugin.graftDialog = function(options) { var clickFn = options.clickFn; var html = [ '<div class="scrawl-main" id="scrawl-main">', //绘图区域 '<div class="hot">', '<div class="drawBoard border_style">', '<canvas id="canvas-borad" class="brushBorad">你的浏览器不支持 canvas 绘图</canvas>', '<div class="picBoard" id="picBoard" style=""></div>', '</div>', '<div class="operateBar">', '<button id="J_prevStep" class="prevStep" title="上一步">', '<em class="icon"></em>', '</button>', '<button id="J_nextStep" class="nextStep" title="下一步">', '<em class="icon"></em>', '</button>', '<button id="J_clearBoard" class="clearBoard" title="清空">', '<em class="icon"></em>', '</button>', '</div>', '</div>', //绘图区域 end //工具栏 '<div class="drawToolbar border_style">', '<div class="colorBar">', '<span data-color="#0099CC" style="background:#0099CC;" class="active"></span>', '<span data-color="#003366" style="background:#003366;"></span>', '<span data-color="#993333" style="background:#993333;"></span>', '<span data-color="#FF9900" style="background:#FF9900;"></span>', '<span data-color="#0000CC" style="background:#0000CC;"></span>', '<span data-color="#CC3333" style="background:#CC3333;"></span>', '<span data-color="#F4D03F" style="background:#641E16;"></span>', '<span data-color="#4A235A" style="background:#4A235A;"></span>', '<span data-color="#009966" style="background:#009966;"></span>', '<span data-color="#ffff00" style="background:#ffff00;"></span>', '<span data-color="#7D6608" style="background:#7D6608;"></span>', '<span data-color="#FF33CC" style="background:#FF33CC;"></span>', '<span data-color="#990066" style="background:#990066;"></span>', '<span data-color="#ffffff" style="background:#ffffff;"></span>', '<span data-color="#9bbb59" style="background:#9bbb59;"></span>', '<span data-color="#CCFFFF" style="background:#CCFFFF;"></span>', '<span data-color="#FFCCCC" style="background:#FFCCCC;"></span>', '<span data-color="#CC99CC" style="background:#CC99CC;"></span>', '</div>', //笔刷设置 '<div class="sectionBar">', '<em class="brushIcon"></em>', '<a href="javascript:void(0)" class="brush-size size1">1</a>', '<a href="javascript:void(0)" class="brush-size size2">3</a>', '<a href="javascript:void(0)" class="brush-size size3">5</a>', '<a href="javascript:void(0)" class="brush-size size4">7</a>', '</div>', '<div class="sectionBar">', '<em class="eraserIcon"></em>', '<a href="javascript:void(0)" class="eraser-size size1">5</a>', '<a href="javascript:void(0)" class="eraser-size size2">10</a>', '<a href="javascript:void(0)" class="eraser-size size3">15</a>', '<a href="javascript:void(0)" class="eraser-size size4">20</a>', '</div>', '<div class="sectionBar">', '<em class="blurIcon"></em>', '<a href="javascript:void(0)" class="blur-size size1">2</a>', '<a href="javascript:void(0)" class="blur-size size2">4</a>', '<a href="javascript:void(0)" class="blur-size size3">6</a>', '<a href="javascript:void(0)" class="blur-size size4">8</a>', '</div>', //end 笔刷设置 '<div class="sectionBar">', '<span id="clearSetting" class="clearSetting">', '<em class="icon"></em>', '<em class="text">初始化设置</em>', '</span>', '</div>', '<div class="sectionBar">', '<div id="J_addImg" class="addImgH">', '<em class="icon"></em>', '<em class="text">添加背景</em>', '<input type="file" class="upload" id="J_canvas_bg" accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"/>', '</div>', '</div>', '<div class="sectionBar">', '<span id="J_removeImg" class="removeImg">', '<em class="icon"></em>', '<em class="text">删除背景</em>', '</span>', '</div>', '</div>' ].join(''); var dialog = self.createDialog({ name : name, width : 750, height : 440, title : self.lang(name), body : html, yesBtn : { name : lang.btnText, click : function(e) { if (dialog.isLoading) { return; } if (canvas.isEmpty()) { K.options.errorMsgHandler(lang.empty, "error"); return; } canvas.save(function(data) { //上传涂鸦到服务器 if (allowUploadGraft) { dialog.showLoading(self.lang('uploadLoading')); $.post(uploadJson, { img_base64_data : data, fileType : "image", base64 : 1 }, function(res) { dialog.hideLoading(); if (res.code == "000") { K.options.errorMsgHandler(lang.uploadSuccess, "ok"); clickFn.call(self, res.data.url); self.hideDialog().focus(); } else { K.options.errorMsgHandler(lang.uploadFaild, "error"); } }, "json"); } else { clickFn.call(self, data); self.hideDialog().focus(); } }); } } }); //console.log(div); //var urlBox = K('[name="url"]', div), // viewServerBtn = K('[name="viewServer"]', div), // titleBox = K('[name="title"]', div); var canvas = new Canvas({ canvasId : "canvas-borad", width : 600, height : 320 }); }; self.clickToolbar(name, function() { self.plugin.graftDialog({ clickFn : function(url) { self.exec('insertimage', url); } }); }); });