molong/sentcms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更换编辑器

Browse Source
This commit is contained in:
tensent
2020-04-03 11:36:07 +08:00
parent 9dafceb2eb
commit 743d429bb8
591 changed files with 20918 additions and 99838 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/static/plugins/NKeditor/plugins/graft/css/images/addimg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 628 B

BIN
public/static/plugins/NKeditor/plugins/graft/css/images/blur.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
public/static/plugins/NKeditor/plugins/graft/css/images/brush.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 608 B

BIN
public/static/plugins/NKeditor/plugins/graft/css/images/delimg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 516 B

BIN
public/static/plugins/NKeditor/plugins/graft/css/images/delimgH.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 578 B

BIN
public/static/plugins/NKeditor/plugins/graft/css/images/empty.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 519 B

BIN
public/static/plugins/NKeditor/plugins/graft/css/images/emptyH.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 657 B

BIN
public/static/plugins/NKeditor/plugins/graft/css/images/eraser.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
public/static/plugins/NKeditor/plugins/graft/css/images/init.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 695 B

BIN
public/static/plugins/NKeditor/plugins/graft/css/images/redo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 454 B

BIN
public/static/plugins/NKeditor/plugins/graft/css/images/redoH.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 536 B

BIN
public/static/plugins/NKeditor/plugins/graft/css/images/save.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 837 B

BIN
public/static/plugins/NKeditor/plugins/graft/css/images/scale.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 435 B

BIN
public/static/plugins/NKeditor/plugins/graft/css/images/scaleH.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 330 B

BIN
public/static/plugins/NKeditor/plugins/graft/css/images/size.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 775 B

BIN
public/static/plugins/NKeditor/plugins/graft/css/images/undo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 444 B

BIN
public/static/plugins/NKeditor/plugins/graft/css/images/undoH.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 511 B

204
public/static/plugins/NKeditor/plugins/graft/css/scrawl.css Normal file
View File

@@ -0,0 +1,204 @@
/*common
*/
body {
margin: 0; }
body a {
text-decoration: none; }
body em {
font-style: normal; }
body .border_style {
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 2px 2px 5px #d3d6da; }
body em {
font-style: normal; }
body .ke-dialog-body {
padding-top: 8px; }
body .scrawl-main {
padding: 0px 8px;
zoom: 1;
overflow: hidden;
max-width: 1000px; }
body .scrawl-main .hot {
float: left; }
body .scrawl-main .hot .drawBoard {
position: relative;
cursor: crosshair; }
body .scrawl-main .hot .drawBoard .brushBorad {
position: absolute;
left: 0;
top: 0;
z-index: 998; }
body .scrawl-main .hot .drawBoard .picBoard {
border: none;
text-align: center;
cursor: default; }
body .scrawl-main .hot .operateBar {
margin-top: 10px;
font-size: 12px;
text-align: center; }
body .scrawl-main .hot .operateBar span {
margin-left: 10px; }
body .scrawl-main .hot .operateBar button {
background: #e1e1e1;
border: 1px solid #cccccc;
margin: 0px 5px;
cursor: default; }
body .scrawl-main .hot .operateBar .prevStep .icon {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("images/undo.png"); }
body .scrawl-main .hot .operateBar .prevStep.active {
cursor: pointer;
background: #FFFFFF;
border-color: #56CCCC; }
body .scrawl-main .hot .operateBar .prevStep.active .icon {
background-image: url("images/undoH.png"); }
body .scrawl-main .hot .operateBar .nextStep .icon {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("images/redo.png"); }
body .scrawl-main .hot .operateBar .nextStep.active {
cursor: pointer;
background: #FFFFFF;
border-color: #56CCCC; }
body .scrawl-main .hot .operateBar .nextStep.active .icon {
background-image: url("images/redoH.png"); }
body .scrawl-main .hot .operateBar .clearBoard {
cursor: default; }
body .scrawl-main .hot .operateBar .clearBoard .icon {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("images/empty.png"); }
body .scrawl-main .hot .operateBar .clearBoard.active {
cursor: pointer;
background: #FFFFFF;
border-color: #56CCCC; }
body .scrawl-main .hot .operateBar .clearBoard.active .icon {
background-image: url("images/emptyH.png"); }
body .scrawl-main .hot .operateBar .scaleBoard .icon {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("images/scale.png");
cursor: default; }
body .scrawl-main .hot .operateBar .scaleBoard .iconH {
background-image: url("images/scaleH.png"); }
body .scrawl-main .hot .operateBar .scaleBoard .text {
color: #ccc;
cursor: default; }
body .scrawl-main .drawToolbar {
float: right;
width: 110px;
height: 320px;
overflow: hidden; }
body .scrawl-main .drawToolbar .brushIcon {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("images/brush.png"); }
body .scrawl-main .drawToolbar .eraserIcon {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("images/eraser.png"); }
body .scrawl-main .drawToolbar .blurIcon {
display: inline-block;
width: 16px;
height: 16px;
background: url(images/blur.png) -2px -2px;
background-size: 22px 20px; }
body .scrawl-main .drawToolbar .colorBar {
margin-top: 10px;
font-size: 12px;
text-align: center;
zoom: 1;
overflow: hidden; }
body .scrawl-main .drawToolbar .colorBar span {
float: left;
margin: 2px 3px;
width: 10px;
height: 10px;
border: 1px solid #c1c1c1;
border-radius: 3px;
cursor: pointer; }
body .scrawl-main .drawToolbar .colorBar .active {
border-color: #FF0000;
box-shadow: 2px 2px 5px #d3d6da; }
body .scrawl-main .drawToolbar .sectionBar {
margin-top: 15px;
font-size: 12px;
text-align: center; }
body .scrawl-main .drawToolbar .sectionBar a {
display: inline-block;
width: 10px;
height: 12px;
color: #888;
text-indent: -999px;
opacity: 0.3; }
body .scrawl-main .drawToolbar .sectionBar .size1 {
background: url("images/size.png") 1px center no-repeat; }
body .scrawl-main .drawToolbar .sectionBar .size2 {
background: url("images/size.png") -10px center no-repeat; }
body .scrawl-main .drawToolbar .sectionBar .size3 {
background: url("images/size.png") -22px center no-repeat; }
body .scrawl-main .drawToolbar .sectionBar .size4 {
background: url("images/size.png") -35px center no-repeat; }
body .scrawl-main .drawToolbar .sectionBar .icon {
position: relative;
top: 3px; }
body .scrawl-main .drawToolbar .sectionBar .clearSetting .icon {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("images/init.png");
background-size: 16px 16px; }
body .scrawl-main .drawToolbar .sectionBar .addImgH {
position: relative; }
body .scrawl-main .drawToolbar .sectionBar .addImgH .icon {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("images/addimg.png");
cursor: default; }
body .scrawl-main .drawToolbar .sectionBar .addImgH .upload {
position: absolute;
left: 18px;
top: -1px;
width: 75px;
height: 21px;
opacity: 0;
cursor: pointer;
opacity: 0; }
body .scrawl-main .drawToolbar .sectionBar .removeImg .icon {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("images/delimg.png");
cursor: default; }
body .scrawl-main .drawToolbar .sectionBar .removeImg .text {
color: #ccc;
cursor: default; }
body .scrawl-main .drawToolbar .sectionBar .removeImg.active {
cursor: pointer; }
body .scrawl-main .drawToolbar .sectionBar .removeImg.active .icon {
background-image: url("images/delimgH.png"); }
body .scrawl-main .drawToolbar .sectionBar .removeImg.active .text {
color: #000;
cursor: default; }
body .scrawl-main .drawToolbar .sectionBar .saveImg {
cursor: pointer; }
body .scrawl-main .drawToolbar .sectionBar .saveImg .icon {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("images/save.png");
background-size: 18px 18px;
cursor: default; }
body .scrawl-main .drawToolbar #clearSetting {
cursor: pointer; }
/*# sourceMappingURL=scrawl.css.map */

7
public/static/plugins/NKeditor/plugins/graft/css/scrawl.css.map Normal file
View File

@@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "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",
"sources": ["scrawl.scss"],
"names": [],
"file": "scrawl.css"
}

284
public/static/plugins/NKeditor/plugins/graft/css/scrawl.scss Normal file
View File

@@ -0,0 +1,284 @@
/*common
*/
body {
margin: 0;
a{text-decoration: none;}
em{font-style: normal;}
.border_style{
border: 1px solid #ccc;
border-radius: 5px;
box-shadow:2px 2px 5px #d3d6da;
}
em {font-style: normal;}
.ke-dialog-body {
padding-top: 8px;
}
.scrawl-main {
padding: 0px 8px;
zoom: 1;
overflow: hidden;
max-width: 1000px;
// 绘图区域
.hot {
float:left;
.drawBoard{
position: relative;
cursor: crosshair;
.brushBorad{
position: absolute;
left:0;
top:0;
z-index: 998;
}
.picBoard{
border: none;
text-align: center;
cursor: default;
}
}
.operateBar{
margin-top:10px;
font-size:12px;
text-align: center;
span {margin-left: 10px;}
button {
background:#e1e1e1;
border: 1px solid #cccccc;
margin: 0px 5px;
cursor:default;
}
.prevStep {
.icon {
display: inline-block;
width:16px;height:16px;
background-image: url('images/undo.png');
}
}
.prevStep.active {
cursor: pointer;
background: #FFFFFF;
border-color: #56CCCC;
.icon {
background-image: url('images/undoH.png');
}
}
.nextStep {
.icon {
display: inline-block;
width:16px;
height:16px;
background-image: url('images/redo.png');
}
}
.nextStep.active {
cursor: pointer;
background: #FFFFFF;
border-color: #56CCCC;
.icon {
background-image: url('images/redoH.png');
}
}
.clearBoard {
cursor: default;
.icon {
display: inline-block;
width:16px;height:16px;
background-image: url('images/empty.png');
}
}
.clearBoard.active {
cursor: pointer;
background: #FFFFFF;
border-color: #56CCCC;
.icon {
background-image: url('images/emptyH.png');
}
}
.scaleBoard {
.icon {
display: inline-block;
width:16px;height:16px;
background-image: url('images/scale.png');
cursor:default;}
.iconH {
background-image: url('images/scaleH.png');
}
.text{
color:#ccc;
cursor:default;}
}
}
}
// 绘图工具
.drawToolbar {
float:right;
width:110px;
height:320px;
overflow: hidden;
.brushIcon {
display: inline-block;
width:16px;height:16px;
background-image: url('images/brush.png')}
.eraserIcon {
display: inline-block;
width:16px;height:16px;
background-image: url('images/eraser.png')}
.blurIcon {
display: inline-block;
width:16px;height:16px;
background: url(images/blur.png) -2px -2px;
background-size: 22px 20px;
}
.colorBar {
margin-top:10px;
font-size: 12px;
text-align: center;
zoom: 1;
overflow: hidden;
span {
float: left;
margin: 2px 3px;
width: 10px;
height: 10px;
border:1px solid #c1c1c1;
border-radius: 3px;
cursor: pointer;
}
.active {
border-color: #FF0000;
box-shadow:2px 2px 5px #d3d6da;
}
}
.sectionBar {
margin-top:15px;
font-size: 12px;
text-align: center;
a {
display:inline-block;
width:10px;
height:12px;
color: #888;
text-indent: -999px;
opacity: 0.3
}
.size1 {background: url('images/size.png') 1px center no-repeat ;}
.size2 {background: url('images/size.png') -10px center no-repeat;}
.size3 {background: url('images/size.png') -22px center no-repeat;}
.size4 {background: url('images/size.png') -35px center no-repeat;}
.icon {
position: relative;
top:3px;
}
.clearSetting {
.icon {
display: inline-block;
width:16px;height:16px;
background-image: url('images/init.png');
background-size: 16px 16px;
}
}
.addImgH {
position: relative;
.icon {
display: inline-block;
width:16px;height:16px;
background-image: url('images/addimg.png');
cursor:default;
}
.upload {
position: absolute;
left: 18px;top: -1px;
width: 75px;
height: 21px;
opacity: 0;
cursor: pointer;
opacity: 0;
}
}
.removeImg {
.icon {
display: inline-block;
width:16px;height:16px;
background-image: url('images/delimg.png');
cursor:default;
}
.text{color:#ccc;cursor:default;}
} //end removeImg
.removeImg.active {
cursor: pointer;
.icon {
background-image: url('images/delimgH.png');
}
.text{color:#000;cursor:default;}
} //end removeImg
//保存图片
.saveImg {
cursor: pointer;
.icon {
display: inline-block;
width:16px;height:16px;
background-image: url('images/save.png');
background-size: 18px 18px;
cursor:default;
}
}
}
#clearSetting {cursor: pointer;}
}
}
}

189
public/static/plugins/NKeditor/plugins/graft/graft.js Normal file
View File

@@ -0,0 +1,189 @@
/*******************************************************************************
* 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);
}
});
});
});

134
public/static/plugins/NKeditor/plugins/graft/index.html Normal file
View File

@@ -0,0 +1,134 @@
<!DOCTYPE html>
<html>
<head>
<title>在线涂鸦工具</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="robots" content="noindex, nofollow"/>
<link rel="stylesheet" type="text/css" href="css/scrawl.css">
</head>
<body>
<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>
<!--<span id="J_sacleBoard" class="scaleBoard">-->
<!--<em class="icon"></em>-->
<!--<em class="text">缩放背景</em>-->
<!--</span>-->
</div>
</div>
<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="#c00000" style="background:#641E16;"></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>
<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 class="sectionBar">
<span id="J_saveImg" class="saveImg">
<em class="icon"></em>
<em class="text">保存图片</em>
</span>
</div>
</div>
</div>
<script type="text/javascript" src="scrawl/libs/jquery.min.js"></script>
<script type="text/javascript" src="scrawl.js"></script>
<script>
new Canvas({
canvasId : "canvas-borad",
width : 700,
height : 400,
save : function(data) {
$.post("upload.php", {imgBase64: data}, function(res) {
if (res.code == "000") {
alert("图片保存成功！");
location.href = res.url;
} else {
alert(res.url);
}
}, "json");
}
});
</script>
</body>
</html>

262
public/static/plugins/NKeditor/plugins/graft/scrawl.js Normal file
View File

@@ -0,0 +1,262 @@
/**
* Created by yangjian on 17-9-18.
*/
(function($) {
// 设置元素可用状态
$.fn.enable = function() {
$(this).addClass("active");
$(this).removeAttr("disabled");
}
// 设置元素不可用状态
$.fn.disable = function() {
$(this).removeClass("active");
$(this).attr("disabled", true);
}
var Canvas = function(options) {
var configs = {
width : 360,
height : 300
}; //默认配置
options = options || {};
$.extend(configs, options);
var canvas = $("#"+configs.canvasId)[0]; //画布
canvas.width = configs.width;
canvas.height = configs.height;
var context = canvas.getContext("2d"); //绘图环境
context.lineCap = "round";　//设置线条两端为圆弧
context.lineJoin = "round";　//设置线条转折为圆弧
//设置默认颜色
setColor();
var $prevBtn = $("#J_prevStep"); //上一步
var $nextBtn = $("#J_nextStep"); //下一步
var $clearBtn = $("#J_clearBoard"); //清空画板
var drawing = false; //是否正在绘制
var erasering = false; //是否正在擦除
var prevSteps = []; //返回上一步操作集合
var nextSteps = []; //恢复下一步操作集合
var o = {};
$("#picBoard").css({
width : configs.width + "px",
height : configs.height + "px"
});
// 事件绑定
canvas.onmousedown = startDrawing;
canvas.onmouseup = stopDrawing;
canvas.onmouseout = stopDrawing;
canvas.onmousemove = doDrawing;
$prevBtn.on("click", gotoPrevStep);
$nextBtn.on("click", gotoNextStep);
$clearBtn.on("click", clearBoard);
// 清空设置
$("#clearSetting").on("click", function() {
context.lineWidth = 1;
setColor($(".colorBar span:first").data("color"));
context.shadowBlur = 0;
alert("画笔已重新初始化，请重新配置画笔。");
});
//上传背景图片
$("#J_canvas_bg").on("change", function() {
if ($("#picBoard img").length > 0) {
$("#picBoard img:eq(0)").attr("src", window.URL.createObjectURL(this.files[0]));
return;
}
var $img = '<img src="'+window.URL.createObjectURL(this.files[0])+'" width="'+configs.width+'" height="'+configs.height+'" />';
$("#picBoard").append($img);
// 激活删除背景按钮
$("#J_removeImg").enable();
});
// 删除背景图片
$("#J_removeImg").on("click", function() {
$("#picBoard").empty();
$(this).disable();
});
//保存图片
$('#J_saveImg').on("click", saveImage);
// 设置笔刷大小
$("#scrawl-main .brush-size").on("click", function() {
context.restore(); //恢复到canvas的上一个状态
context.lineWidth = parseInt($(this).text());
erasering = false;
});
// 设置笔触虚化
$("#scrawl-main .blur-size").on("click", function() {
context.shadowBlur = parseInt($(this).text());
});
// 橡皮擦功能
$("#scrawl-main .eraser-size").on("click", function() {
if (erasering == true) {
return;
}
erasering = true;
context.save(); //保存canvas状态
context.lineCap = "round";　//设置线条两端为圆弧
context.lineJoin = "round";　//设置线条转折为圆弧
context.lineWidth = 10;
context.globalCompositeOperation = "destination-out";
});
//设置颜色
$("#scrawl-main .colorBar span").on("click",function() {
$("#scrawl-main .colorBar .active").removeClass("active");
$(this).addClass("active");
setColor($(this).data("color"));
});
// 开始绘制
function startDrawing(e) {
drawing = true;
//记录上一步的数据
prevSteps.push(context.getImageData(0, 0, configs.width, configs.height));
// 创建一个新的绘图路径
context.beginPath();
// 把画笔移动到鼠标位置
var offset = $(canvas).offset();
context.moveTo(e.pageX - offset.left, e.pageY - offset.top);
}
// 停止绘制
function stopDrawing() {
drawing = false;
//清空下一步的数据集合，从新开始记录
nextSteps = [];
$nextBtn.disable();
if (prevSteps.length == 1) {
$prevBtn.enable();
$clearBtn.enable();
}
}
//绘制图像
function doDrawing(e) {
if (drawing) {
// 找到鼠标最新位置
var offset = $(canvas).offset();
var x = e.pageX - offset.left;
var y = e.pageY - offset.top;
// 画一条直线到鼠标最新位置
context.lineTo(x, y);
context.stroke();
}
}
/**
* 返回上一步操作
*/
function gotoPrevStep() {
if (prevSteps.length > 0) {
//保存当前状态到下一步的操作历史库
nextSteps.push(context.getImageData(0, 0, configs.width, configs.height));
var popData = prevSteps.pop();
context.putImageData(popData, 0, 0);
$nextBtn.enable();
if (prevSteps.length == 0) {
$prevBtn.disable();
}
}
}
/**
* 恢复下一步操作
*/
function gotoNextStep() {
if (nextSteps.length > 0) {
//保存当前状态到上一步的操作历史库
prevSteps.push(context.getImageData(0, 0, configs.width, configs.height));
var imgData = nextSteps.pop();
context.putImageData(imgData, 0, 0);
$prevBtn.enable();
if (nextSteps.length == 0) {
$nextBtn.disable();
}
}
}
/**
* 清空画板
*/
function clearBoard() {
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
prevSteps = [];
nextSteps = [];
$prevBtn.disable();
$nextBtn.disable();
$clearBtn.disable();
}
/**
* 设置画笔颜色
* @param color
*/
function setColor(color) {
if (!color) {
color = $(".colorBar .active:eq(0)").data("color");
}
context.strokeStyle = color;
context.shadowColor = color;
}
/**
* 获取图片 base64 编码
*/
function saveImage(callback) {
if ($("#picBoard img").length > 0) {
var image = new Image();
image.src = $("#picBoard img:eq(0)").attr("src");
image.onload = function() {
context.save();
context.shadowBlur = 0;
context.shadowColor = '#FFF';
context.globalCompositeOperation = "destination-atop";
context.drawImage(this, 0, 0, configs.width, configs.height);
context.restore();
callback(canvas.toDataURL("image/png"));
}
} else {
callback(canvas.toDataURL("image/png"));
}
}
//要导出的API
o.nextStep = gotoNextStep;
o.prevStep = gotoNextStep;
o.setColor = setColor;
o.save = saveImage;
o.isEmpty = function() {
return prevSteps.length == 0;
}
return o;
}
window.Canvas = Canvas;
})(jQuery);