Commit a866cd37 authored by panpp's avatar panpp
Browse files

static init

parent 5c8b50e7
/*common
*/
body{margin: 0;}
table{width:100%;}
table td{padding:2px 4px;vertical-align: middle;}
a{text-decoration: none;}
em{font-style: normal;}
.border_style1{border: 1px solid #ccc;border-radius: 5px;box-shadow:2px 2px 5px #d3d6da;}
/*module
*/
.main{margin: 8px;overflow: hidden;}
.hot{float:left;height:335px;}
.drawBoard{position: relative; cursor: crosshair;}
.brushBorad{position: absolute;left:0;top:0;z-index: 998;}
.picBoard{border: none;text-align: center;line-height: 300px;cursor: default;}
.operateBar{margin-top:10px;font-size:12px;text-align: center;}
.operateBar span{margin-left: 10px;}
.drawToolbar{float:right;width:110px;height:300px;overflow: hidden;}
.colorBar{margin-top:10px;font-size: 12px;text-align: center;}
.colorBar a{display:block;width: 10px;height: 10px;border:1px solid #1006F1;border-radius: 3px; box-shadow:2px 2px 5px #d3d6da;opacity: 0.3}
.sectionBar{margin-top:15px;font-size: 12px;text-align: center;}
.sectionBar 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;}
.addImgH{position: relative;}
.addImgH_form{position: absolute;left: 18px;top: -1px;width: 75px;height: 21px;opacity: 0;cursor: pointer;}
.addImgH_form input{width: 100%;}
/*scrawl遮罩层
*/
.maskLayerNull{display: none;}
.maskLayer{position: absolute;top:0;left:0;width: 100%; height: 100%;opacity: 0.7;
background-color: #fff;text-align:center;font-weight:bold;line-height:300px;z-index: 1000;}
/*btn state
*/
.previousStepH .icon{display: inline-block;width:16px;height:16px;background-image: url('images/undoH.png');cursor: pointer;}
.previousStepH .text{color:#888;cursor:pointer;}
.previousStep .icon{display: inline-block;width:16px;height:16px;background-image: url('images/undo.png');cursor:default;}
.previousStep .text{color:#ccc;cursor:default;}
.nextStepH .icon{display: inline-block;width:16px;height:16px;background-image: url('images/redoH.png');cursor: pointer;}
.nextStepH .text{color:#888;cursor:pointer;}
.nextStep .icon{display: inline-block;width:16px;height:16px;background-image: url('images/redo.png');cursor:default;}
.nextStep .text{color:#ccc;cursor:default;}
.clearBoardH .icon{display: inline-block;width:16px;height:16px;background-image: url('images/emptyH.png');cursor: pointer;}
.clearBoardH .text{color:#888;cursor:pointer;}
.clearBoard .icon{display: inline-block;width:16px;height:16px;background-image: url('images/empty.png');cursor:default;}
.clearBoard .text{color:#ccc;cursor:default;}
.scaleBoardH .icon{display: inline-block;width:16px;height:16px;background-image: url('images/scaleH.png');cursor: pointer;}
.scaleBoardH .text{color:#888;cursor:pointer;}
.scaleBoard .icon{display: inline-block;width:16px;height:16px;background-image: url('images/scale.png');cursor:default;}
.scaleBoard .text{color:#ccc;cursor:default;}
.removeImgH .icon{display: inline-block;width:16px;height:16px;background-image: url('images/delimgH.png');cursor: pointer;}
.removeImgH .text{color:#888;cursor:pointer;}
.removeImg .icon{display: inline-block;width:16px;height:16px;background-image: url('images/delimg.png');cursor:default;}
.removeImg .text{color:#ccc;cursor:default;}
.addImgH .icon{vertical-align:top;display: inline-block;width:16px;height:16px;background-image: url('images/addimg.png')}
.addImgH .text{color:#888;cursor:pointer;}
/*icon
*/
.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')}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="robots" content="noindex, nofollow"/>
<script type="text/javascript" src="../internal.js"></script>
<link rel="stylesheet" type="text/css" href="scrawl.css">
</head>
<body>
<div class="main" id="J_wrap">
<div class="hot">
<div class="drawBoard border_style1">
<canvas id="J_brushBoard" class="brushBorad" width="360" height="300"></canvas>
<div id="J_picBoard" class="picBoard" style="width: 360px;height: 300px"></div>
</div>
<div id="J_operateBar" class="operateBar">
<span id="J_previousStep" class="previousStep">
<em class="icon"></em>
<em class="text"><var id="lang_input_previousStep"></var></em>
</span>
<span id="J_nextStep" class="nextStep">
<em class="icon"></em>
<em class="text"><var id="lang_input_nextsStep"></var></em>
</span>
<span id="J_clearBoard" class="clearBoard">
<em class="icon"></em>
<em class="text"><var id="lang_input_clear"></var></em>
</span>
<span id="J_sacleBoard" class="scaleBoard">
<em class="icon"></em>
<em class="text"><var id="lang_input_ScalePic"></var></em>
</span>
</div>
</div>
<div class="drawToolbar border_style1">
<div id="J_colorBar" class="colorBar"></div>
<div id="J_brushBar" class="sectionBar">
<em class="brushIcon"></em>
<a href="javascript:void(0)" class="size1">1</a>
<a href="javascript:void(0)" class="size2">3</a>
<a href="javascript:void(0)" class="size3">5</a>
<a href="javascript:void(0)" class="size4">7</a>
</div>
<div id="J_eraserBar" class="sectionBar">
<em class="eraserIcon"></em>
<a href="javascript:void(0)" class="size1">1</a>
<a href="javascript:void(0)" class="size2">3</a>
<a href="javascript:void(0)" class="size3">5</a>
<a href="javascript:void(0)" class="size4">7</a>
</div>
<div class="sectionBar">
<div id="J_addImg" class="addImgH">
<em class="icon"></em>
<em class="text"><var id="lang_input_addPic"></var></em>
<form method="post" id="fileForm" enctype="multipart/form-data" class="addImgH_form" target="up">
<input type="file" name="upfile" id="J_imgTxt"
accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"/>
</form>
<iframe name="up" style="display: none"></iframe>
</div>
</div>
<div class="sectionBar">
<span id="J_removeImg" class="removeImg">
<em class="icon"></em>
<em class="text"><var id="lang_input_removePic"></var></em>
</span>
</div>
</div>
</div>
<div id="J_maskLayer" class="maskLayerNull"></div>
<script type="text/javascript" src="scrawl.js"></script>
<script type="text/javascript">
var settings = {
drawBrushSize:3, //画笔初始大小
drawBrushColor:"#4bacc6", //画笔初始颜色
colorList:['c00000', 'ff0000', 'ffc000', 'ffff00', '92d050', '00b050', '00b0f0', '0070c0', '002060', '7030a0', 'ffffff',
'000000', 'eeece1', '1f497d', '4f81bd', 'c0504d', '9bbb59', '8064a2', '4bacc6', 'f79646'], //画笔选择颜色
saveNum:10 //撤销次数
};
var scrawlObj = new scrawl( settings );
scrawlObj.isCancelScrawl = false;
dialog.onok = function () {
exec( scrawlObj );
return false;
};
dialog.oncancel = function () {
scrawlObj.isCancelScrawl = true;
};
</script>
</body>
</html>
\ No newline at end of file
/**
* Created with JetBrains PhpStorm.
* User: xuheng
* Date: 12-5-22
* Time: 上午11:38
* To change this template use File | Settings | File Templates.
*/
var scrawl = function (options) {
options && this.initOptions(options);
};
(function () {
var canvas = $G("J_brushBoard"),
context = canvas.getContext('2d'),
drawStep = [], //undo redo存储
drawStepIndex = 0; //undo redo指针
scrawl.prototype = {
isScrawl:false, //是否涂鸦
brushWidth:-1, //画笔粗细
brushColor:"", //画笔颜色
initOptions:function (options) {
var me = this;
me.originalState(options);//初始页面状态
me._buildToolbarColor(options.colorList);//动态生成颜色选择集合
me._addBoardListener(options.saveNum);//添加画板处理
me._addOPerateListener(options.saveNum);//添加undo redo clearBoard处理
me._addColorBarListener();//添加颜色选择处理
me._addBrushBarListener();//添加画笔大小处理
me._addEraserBarListener();//添加橡皮大小处理
me._addAddImgListener();//添加增添背景图片处理
me._addRemoveImgListenter();//删除背景图片处理
me._addScalePicListenter();//添加缩放处理
me._addClearSelectionListenter();//添加清楚选中状态处理
me._originalColorSelect(options.drawBrushColor);//初始化颜色选中
me._originalBrushSelect(options.drawBrushSize);//初始化画笔选中
me._clearSelection();//清楚选中状态
},
originalState:function (options) {
var me = this;
me.brushWidth = options.drawBrushSize;//同步画笔粗细
me.brushColor = options.drawBrushColor;//同步画笔颜色
context.lineWidth = me.brushWidth;//初始画笔大小
context.strokeStyle = me.brushColor;//初始画笔颜色
context.fillStyle = "transparent";//初始画布背景颜色
context.lineCap = "round";//去除锯齿
context.fill();
},
_buildToolbarColor:function (colorList) {
var tmp = null, arr = [];
arr.push("<table id='J_colorList'>");
for (var i = 0, color; color = colorList[i++];) {
if ((i - 1) % 5 == 0) {
if (i != 1) {
arr.push("</tr>");
}
arr.push("<tr>");
}
tmp = '#' + color;
arr.push("<td><a title='" + tmp + "' href='javascript:void(0)' style='background-color:" + tmp + "'></a></td>");
}
arr.push("</tr></table>");
$G("J_colorBar").innerHTML = arr.join("");
},
_addBoardListener:function (saveNum) {
var me = this,
margin = 0,
startX = -1,
startY = -1,
isMouseDown = false,
isMouseMove = false,
isMouseUp = false,
buttonPress = 0, button, flag = '';
margin = parseInt(domUtils.getComputedStyle($G("J_wrap"), "margin-left"));
drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height));
drawStepIndex += 1;
domUtils.on(canvas, ["mousedown", "mousemove", "mouseup", "mouseout"], function (e) {
button = browser.webkit ? e.which : buttonPress;
switch (e.type) {
case 'mousedown':
buttonPress = 1;
flag = 1;
isMouseDown = true;
isMouseUp = false;
isMouseMove = false;
me.isScrawl = true;
startX = e.clientX - margin;//10为外边距总和
startY = e.clientY - margin;
context.beginPath();
break;
case 'mousemove' :
if (!flag && button == 0) {
return;
}
if (!flag && button) {
startX = e.clientX - margin;//10为外边距总和
startY = e.clientY - margin;
context.beginPath();
flag = 1;
}
if (isMouseUp || !isMouseDown) {
return;
}
var endX = e.clientX - margin,
endY = e.clientY - margin;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.stroke();
startX = endX;
startY = endY;
isMouseMove = true;
break;
case 'mouseup':
buttonPress = 0;
if (!isMouseDown)return;
if (!isMouseMove) {
context.arc(startX, startY, context.lineWidth, 0, Math.PI * 2, false);
context.fillStyle = context.strokeStyle;
context.fill();
}
context.closePath();
me._saveOPerate(saveNum);
isMouseDown = false;
isMouseMove = false;
isMouseUp = true;
startX = -1;
startY = -1;
break;
case 'mouseout':
flag = '';
buttonPress = 0;
if (button == 1) return;
context.closePath();
break;
}
});
},
_addOPerateListener:function (saveNum) {
var me = this;
domUtils.on($G("J_previousStep"), "click", function () {
if (drawStepIndex > 1) {
drawStepIndex -= 1;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.putImageData(drawStep[drawStepIndex - 1], 0, 0);
me.btn2Highlight("J_nextStep");
drawStepIndex == 1 && me.btn2disable("J_previousStep");
}
});
domUtils.on($G("J_nextStep"), "click", function () {
if (drawStepIndex > 0 && drawStepIndex < drawStep.length) {
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.putImageData(drawStep[drawStepIndex], 0, 0);
drawStepIndex += 1;
me.btn2Highlight("J_previousStep");
drawStepIndex == drawStep.length && me.btn2disable("J_nextStep");
}
});
domUtils.on($G("J_clearBoard"), "click", function () {
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
drawStep = [];
me._saveOPerate(saveNum);
drawStepIndex = 1;
me.isScrawl = false;
me.btn2disable("J_previousStep");
me.btn2disable("J_nextStep");
me.btn2disable("J_clearBoard");
});
},
_addColorBarListener:function () {
var me = this;
domUtils.on($G("J_colorBar"), "click", function (e) {
var target = me.getTarget(e),
color = target.title;
if (!!color) {
me._addColorSelect(target);
me.brushColor = color;
context.globalCompositeOperation = "source-over";
context.lineWidth = me.brushWidth;
context.strokeStyle = color;
}
});
},
_addBrushBarListener:function () {
var me = this;
domUtils.on($G("J_brushBar"), "click", function (e) {
var target = me.getTarget(e),
size = browser.ie ? target.innerText : target.text;
if (!!size) {
me._addBESelect(target);
context.globalCompositeOperation = "source-over";
context.lineWidth = parseInt(size);
context.strokeStyle = me.brushColor;
me.brushWidth = context.lineWidth;
}
});
},
_addEraserBarListener:function () {
var me = this;
domUtils.on($G("J_eraserBar"), "click", function (e) {
var target = me.getTarget(e),
size = browser.ie ? target.innerText : target.text;
if (!!size) {
me._addBESelect(target);
context.lineWidth = parseInt(size);
context.globalCompositeOperation = "destination-out";
context.strokeStyle = "#FFF";
}
});
},
_addAddImgListener:function () {
var file = $G("J_imgTxt");
if (!window.FileReader) {
$G("J_addImg").style.display = 'none';
$G("J_removeImg").style.display = 'none';
$G("J_sacleBoard").style.display = 'none';
}
domUtils.on(file, "change", function (e) {
var frm = file.parentNode;
addMaskLayer(lang.backgroundUploading);
var target = e.target || e.srcElement,
reader = new FileReader();
reader.onload = function(evt){
var target = evt.target || evt.srcElement;
ue_callback(target.result, 'SUCCESS');
};
reader.readAsDataURL(target.files[0]);
frm.reset();
});
},
_addRemoveImgListenter:function () {
var me = this;
domUtils.on($G("J_removeImg"), "click", function () {
$G("J_picBoard").innerHTML = "";
me.btn2disable("J_removeImg");
me.btn2disable("J_sacleBoard");
});
},
_addScalePicListenter:function () {
domUtils.on($G("J_sacleBoard"), "click", function () {
var picBoard = $G("J_picBoard"),
scaleCon = $G("J_scaleCon"),
img = picBoard.children[0];
if (img) {
if (!scaleCon) {
picBoard.style.cssText = "position:relative;z-index:999;"+picBoard.style.cssText;
img.style.cssText = "position: absolute;top:" + (canvas.height - img.height) / 2 + "px;left:" + (canvas.width - img.width) / 2 + "px;";
var scale = new ScaleBoy();
picBoard.appendChild(scale.init());
scale.startScale(img);
} else {
if (scaleCon.style.visibility == "visible") {
scaleCon.style.visibility = "hidden";
picBoard.style.position = "";
picBoard.style.zIndex = "";
} else {
scaleCon.style.visibility = "visible";
picBoard.style.cssText += "position:relative;z-index:999";
}
}
}
});
},
_addClearSelectionListenter:function () {
var doc = document;
domUtils.on(doc, 'mousemove', function (e) {
if (browser.ie && browser.version < 11)
doc.selection.clear();
else
window.getSelection().removeAllRanges();
});
},
_clearSelection:function () {
var list = ["J_operateBar", "J_colorBar", "J_brushBar", "J_eraserBar", "J_picBoard"];
for (var i = 0, group; group = list[i++];) {
domUtils.unSelectable($G(group));
}
},
_saveOPerate:function (saveNum) {
var me = this;
if (drawStep.length <= saveNum) {
if(drawStepIndex<drawStep.length){
me.btn2disable("J_nextStep");
drawStep.splice(drawStepIndex);
}
drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height));
drawStepIndex = drawStep.length;
} else {
drawStep.shift();
drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height));
drawStepIndex = drawStep.length;
}
me.btn2Highlight("J_previousStep");
me.btn2Highlight("J_clearBoard");
},
_originalColorSelect:function (title) {
var colorList = $G("J_colorList").getElementsByTagName("td");
for (var j = 0, cell; cell = colorList[j++];) {
if (cell.children[0].title.toLowerCase() == title) {
cell.children[0].style.opacity = 1;
}
}
},
_originalBrushSelect:function (text) {
var brushList = $G("J_brushBar").children;
for (var i = 0, ele; ele = brushList[i++];) {
if (ele.tagName.toLowerCase() == "a") {
var size = browser.ie ? ele.innerText : ele.text;
if (size.toLowerCase() == text) {
ele.style.opacity = 1;
}
}
}
},
_addColorSelect:function (target) {
var me = this,
colorList = $G("J_colorList").getElementsByTagName("td"),
eraserList = $G("J_eraserBar").children,
brushList = $G("J_brushBar").children;
for (var i = 0, cell; cell = colorList[i++];) {
cell.children[0].style.opacity = 0.3;
}
for (var k = 0, ele; ele = brushList[k++];) {
if (ele.tagName.toLowerCase() == "a") {
ele.style.opacity = 0.3;
var size = browser.ie ? ele.innerText : ele.text;
if (size.toLowerCase() == this.brushWidth) {
ele.style.opacity = 1;
}
}
}
for (var j = 0, node; node = eraserList[j++];) {
if (node.tagName.toLowerCase() == "a") {
node.style.opacity = 0.3;
}
}
target.style.opacity = 1;
target.blur();
},
_addBESelect:function (target) {
var brushList = $G("J_brushBar").children;
var eraserList = $G("J_eraserBar").children;
for (var i = 0, ele; ele = brushList[i++];) {
if (ele.tagName.toLowerCase() == "a") {
ele.style.opacity = 0.3;
}
}
for (var j = 0, node; node = eraserList[j++];) {
if (node.tagName.toLowerCase() == "a") {
node.style.opacity = 0.3;
}
}
target.style.opacity = 1;
target.blur();
},
getCanvasData:function () {
var picContainer = $G("J_picBoard"),
img = picContainer.children[0];
if (img) {
var x, y;
if (img.style.position == "absolute") {
x = parseInt(img.style.left);
y = parseInt(img.style.top);
} else {
x = (picContainer.offsetWidth - img.width) / 2;
y = (picContainer.offsetHeight - img.height) / 2;
}
context.globalCompositeOperation = "destination-over";
context.drawImage(img, x, y, img.width, img.height);
} else {
context.globalCompositeOperation = "destination-atop";
context.fillStyle = "#fff";//重置画布背景白色
context.fillRect(0, 0, canvas.width, canvas.height);
}
try {
return canvas.toDataURL("image/png").substring(22);
} catch (e) {
return "";
}
},
btn2Highlight:function (id) {
var cur = $G(id);
cur.className.indexOf("H") == -1 && (cur.className += "H");
},
btn2disable:function (id) {
var cur = $G(id);
cur.className.indexOf("H") != -1 && (cur.className = cur.className.replace("H", ""));
},
getTarget:function (evt) {
return evt.target || evt.srcElement;
}
};
})();
var ScaleBoy = function () {
this.dom = null;
this.scalingElement = null;
};
(function () {
function _appendStyle() {
var doc = document,
head = doc.getElementsByTagName('head')[0],
style = doc.createElement('style'),
cssText = '.scale{visibility:hidden;cursor:move;position:absolute;left:0;top:0;width:100px;height:50px;background-color:#fff;font-size:0;line-height:0;opacity:.4;filter:Alpha(opacity=40);}'
+ '.scale span{position:absolute;left:0;top:0;width:6px;height:6px;background-color:#006DAE;}'
+ '.scale .hand0, .scale .hand7{cursor:nw-resize;}'
+ '.scale .hand1, .scale .hand6{left:50%;margin-left:-3px;cursor:n-resize;}'
+ '.scale .hand2, .scale .hand4, .scale .hand7{left:100%;margin-left:-6px;}'
+ '.scale .hand3, .scale .hand4{top:50%;margin-top:-3px;cursor:w-resize;}'
+ '.scale .hand5, .scale .hand6, .scale .hand7{margin-top:-6px;top:100%;}'
+ '.scale .hand2, .scale .hand5{cursor:ne-resize;}';
style.type = 'text/css';
try {
style.appendChild(doc.createTextNode(cssText));
} catch (e) {
style.styleSheet.cssText = cssText;
}
head.appendChild(style);
}
function _getDom() {
var doc = document,
hand,
arr = [],
scale = doc.createElement('div');
scale.id = 'J_scaleCon';
scale.className = 'scale';
for (var i = 0; i < 8; i++) {
arr.push("<span class='hand" + i + "'></span>");
}
scale.innerHTML = arr.join("");
return scale;
}
var rect = [
//[left, top, width, height]
[1, 1, -1, -1],
[0, 1, 0, -1],
[0, 1, 1, -1],
[1, 0, -1, 0],
[0, 0, 1, 0],
[1, 0, -1, 1],
[0, 0, 0, 1],
[0, 0, 1, 1]
];
ScaleBoy.prototype = {
init:function () {
_appendStyle();
var me = this,
scale = me.dom = _getDom();
me.scaleMousemove.fp = me;
domUtils.on(scale, 'mousedown', function (e) {
var target = e.target || e.srcElement;
me.start = {x:e.clientX, y:e.clientY};
if (target.className.indexOf('hand') != -1) {
me.dir = target.className.replace('hand', '');
}
domUtils.on(document.body, 'mousemove', me.scaleMousemove);
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
});
domUtils.on(document.body, 'mouseup', function (e) {
if (me.start) {
domUtils.un(document.body, 'mousemove', me.scaleMousemove);
if (me.moved) {
me.updateScaledElement({position:{x:scale.style.left, y:scale.style.top}, size:{w:scale.style.width, h:scale.style.height}});
}
delete me.start;
delete me.moved;
delete me.dir;
}
});
return scale;
},
startScale:function (objElement) {
var me = this, Idom = me.dom;
Idom.style.cssText = 'visibility:visible;top:' + objElement.style.top + ';left:' + objElement.style.left + ';width:' + objElement.offsetWidth + 'px;height:' + objElement.offsetHeight + 'px;';
me.scalingElement = objElement;
},
updateScaledElement:function (objStyle) {
var cur = this.scalingElement,
pos = objStyle.position,
size = objStyle.size;
if (pos) {
typeof pos.x != 'undefined' && (cur.style.left = pos.x);
typeof pos.y != 'undefined' && (cur.style.top = pos.y);
}
if (size) {
size.w && (cur.style.width = size.w);
size.h && (cur.style.height = size.h);
}
},
updateStyleByDir:function (dir, offset) {
var me = this,
dom = me.dom, tmp;
rect['def'] = [1, 1, 0, 0];
if (rect[dir][0] != 0) {
tmp = parseInt(dom.style.left) + offset.x;
dom.style.left = me._validScaledProp('left', tmp) + 'px';
}
if (rect[dir][1] != 0) {
tmp = parseInt(dom.style.top) + offset.y;
dom.style.top = me._validScaledProp('top', tmp) + 'px';
}
if (rect[dir][2] != 0) {
tmp = dom.clientWidth + rect[dir][2] * offset.x;
dom.style.width = me._validScaledProp('width', tmp) + 'px';
}
if (rect[dir][3] != 0) {
tmp = dom.clientHeight + rect[dir][3] * offset.y;
dom.style.height = me._validScaledProp('height', tmp) + 'px';
}
if (dir === 'def') {
me.updateScaledElement({position:{x:dom.style.left, y:dom.style.top}});
}
},
scaleMousemove:function (e) {
var me = arguments.callee.fp,
start = me.start,
dir = me.dir || 'def',
offset = {x:e.clientX - start.x, y:e.clientY - start.y};
me.updateStyleByDir(dir, offset);
arguments.callee.fp.start = {x:e.clientX, y:e.clientY};
arguments.callee.fp.moved = 1;
},
_validScaledProp:function (prop, value) {
var ele = this.dom,
wrap = $G("J_picBoard");
value = isNaN(value) ? 0 : value;
switch (prop) {
case 'left':
return value < 0 ? 0 : (value + ele.clientWidth) > wrap.clientWidth ? wrap.clientWidth - ele.clientWidth : value;
case 'top':
return value < 0 ? 0 : (value + ele.clientHeight) > wrap.clientHeight ? wrap.clientHeight - ele.clientHeight : value;
case 'width':
return value <= 0 ? 1 : (value + ele.offsetLeft) > wrap.clientWidth ? wrap.clientWidth - ele.offsetLeft : value;
case 'height':
return value <= 0 ? 1 : (value + ele.offsetTop) > wrap.clientHeight ? wrap.clientHeight - ele.offsetTop : value;
}
}
};
})();
//后台回调
function ue_callback(url, state) {
var doc = document,
picBorard = $G("J_picBoard"),
img = doc.createElement("img");
//图片缩放
function scale(img, max, oWidth, oHeight) {
var width = 0, height = 0, percent, ow = img.width || oWidth, oh = img.height || oHeight;
if (ow > max || oh > max) {
if (ow >= oh) {
if (width = ow - max) {
percent = (width / ow).toFixed(2);
img.height = oh - oh * percent;
img.width = max;
}
} else {
if (height = oh - max) {
percent = (height / oh).toFixed(2);
img.width = ow - ow * percent;
img.height = max;
}
}
}
}
//移除遮罩层
removeMaskLayer();
//状态响应
if (state == "SUCCESS") {
picBorard.innerHTML = "";
img.onload = function () {
scale(this, 300);
picBorard.appendChild(img);
var obj = new scrawl();
obj.btn2Highlight("J_removeImg");
//trace 2457
obj.btn2Highlight("J_sacleBoard");
};
img.src = url;
} else {
alert(state);
}
}
//去掉遮罩层
function removeMaskLayer() {
var maskLayer = $G("J_maskLayer");
maskLayer.className = "maskLayerNull";
maskLayer.innerHTML = "";
dialog.buttons[0].setDisabled(false);
}
//添加遮罩层
function addMaskLayer(html) {
var maskLayer = $G("J_maskLayer");
dialog.buttons[0].setDisabled(true);
maskLayer.className = "maskLayer";
maskLayer.innerHTML = html;
}
//执行确认按钮方法
function exec(scrawlObj) {
if (scrawlObj.isScrawl) {
addMaskLayer(lang.scrawlUpLoading);
var base64 = scrawlObj.getCanvasData();
if (!!base64) {
var options = {
timeout:100000,
onsuccess:function (xhr) {
if (!scrawlObj.isCancelScrawl) {
var responseObj;
responseObj = eval("(" + xhr.responseText + ")");
if (responseObj.state == "SUCCESS") {
var imgObj = {},
url = editor.options.scrawlUrlPrefix + responseObj.url;
imgObj.src = url;
imgObj._src = url;
imgObj.alt = responseObj.original || '';
imgObj.title = responseObj.title || '';
editor.execCommand("insertImage", imgObj);
dialog.close();
} else {
alert(responseObj.state);
}
}
},
onerror:function () {
alert(lang.imageError);
dialog.close();
}
};
options[editor.getOpt('scrawlFieldName')] = base64;
var actionUrl = editor.getActionUrl(editor.getOpt('scrawlActionName')),
params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '',
url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + params);
ajax.request(url, options);
}
} else {
addMaskLayer(lang.noScarwl + "&nbsp;&nbsp;&nbsp;<input type='button' value='" + lang.continueBtn + "' onclick='removeMaskLayer()'/>");
}
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<script type="text/javascript" src="../internal.js"></script>
<style type="text/css">
.warpper{ position:relative;width: 380px; height: 100%; margin: 10px auto;}
.tabbody{height: 160px;}
.tabbody table{width:100%;border-collapse: separate;border-spacing: 3px;}
.tabbody .panel{width:373px;height:100%;padding-left: 5px;position: absolute;background-color: #fff;}
.tabbody input.int{ width:190px;height:21px;border:1px solid #d7d7d7;line-height:21px;}
.tabbody input.btn{padding: 0 5px; text-align:center;line-height:24px; text-decoration: none;height:24px;background:url("../../themes/default/images/dialog-title-bg.png") repeat-x;border:1px solid #ccc; }
</style>
</head>
<body>
<div class="warpper" id="searchtab">
<div id="head" class="tabhead">
<span tabsrc="find" class="focus"><var id="lang_tab_search"></var></span>
<span tabsrc="replace" ><var id="lang_tab_replace"></var></span>
</div>
<div class="tabbody">
<div class="panel" id="find">
<table>
<tr>
<td width="80"><var id="lang_search1"></var>: </td>
<td><input id="findtxt" type="text" class="int" /></td>
</tr>
<!--<tr>-->
<!--<td colspan="2"><span style="color:red"><var id="lang_searchReg"></var></span></td>-->
<!--</tr>-->
<tr>
<td><var id="lang_case_sensitive1"></var></td>
<td>
<input id="matchCase" type="checkbox" />
</td>
</tr>
<tr>
<td colspan="2">
<input id="nextFindBtn" type="button" class="btn" />
<input id="preFindBtn" type="button" class="btn" />
</td>
</tr>
<tr>
<td colspan="2">
&nbsp;
</td>
</tr>
<tr>
<td colspan="2">
<span id="search-msg" style="color:red"></span>
</td>
</tr>
</table>
</div>
<div class="panel" id="replace">
<table>
<tr>
<td width="80"><var id="lang_search2"></var>: </td>
<td><input id="findtxt1" type="text" class="int" /></td>
</tr>
<!--<tr>-->
<!--<td colspan="2"><span style="color:red"><var id="lang_searchReg1"></var></span></td>-->
<!--</tr>-->
<tr>
<td><var id="lang_replace"></var>: </td>
<td><input id="replacetxt" type="text" class="int" /></td>
</tr>
<tr>
<td><var id="lang_case_sensitive2"></var></td>
<td>
<input id="matchCase1" type="checkbox" />
</td>
</tr>
<tr>
<td colspan="2">
<input id="nextReplaceBtn" type="button" class="btn" />
<input id="preReplaceBtn" type="button" class="btn" />
<input id="repalceBtn" type="button" class="btn" />
<input id="repalceAllBtn" type="button" class="btn" />
</td>
</tr>
<tr>
<td colspan="2">
&nbsp;
</td>
</tr>
<tr>
<td colspan="2">
<span id="replace-msg" style="color:red"></span>
</td>
</tr>
</table>
</div>
</div>
</div>
<script type="text/javascript" src="searchreplace.js"></script>
</body>
</html>
\ No newline at end of file
/**
* Created with JetBrains PhpStorm.
* User: xuheng
* Date: 12-9-26
* Time: 下午12:29
* To change this template use File | Settings | File Templates.
*/
//清空上次查选的痕迹
editor.firstForSR = 0;
editor.currentRangeForSR = null;
//给tab注册切换事件
/**
* tab点击处理事件
* @param tabHeads
* @param tabBodys
* @param obj
*/
function clickHandler( tabHeads,tabBodys,obj ) {
//head样式更改
for ( var k = 0, len = tabHeads.length; k < len; k++ ) {
tabHeads[k].className = "";
}
obj.className = "focus";
//body显隐
var tabSrc = obj.getAttribute( "tabSrc" );
for ( var j = 0, length = tabBodys.length; j < length; j++ ) {
var body = tabBodys[j],
id = body.getAttribute( "id" );
if ( id != tabSrc ) {
body.style.zIndex = 1;
} else {
body.style.zIndex = 200;
}
}
}
/**
* TAB切换
* @param tabParentId tab的父节点ID或者对象本身
*/
function switchTab( tabParentId ) {
var tabElements = $G( tabParentId ).children,
tabHeads = tabElements[0].children,
tabBodys = tabElements[1].children;
for ( var i = 0, length = tabHeads.length; i < length; i++ ) {
var head = tabHeads[i];
if ( head.className === "focus" )clickHandler(tabHeads,tabBodys, head );
head.onclick = function () {
clickHandler(tabHeads,tabBodys,this);
}
}
}
$G('searchtab').onmousedown = function(){
$G('search-msg').innerHTML = '';
$G('replace-msg').innerHTML = ''
}
//是否区分大小写
function getMatchCase(id) {
return $G(id).checked ? true : false;
}
//查找
$G("nextFindBtn").onclick = function (txt, dir, mcase) {
var findtxt = $G("findtxt").value, obj;
if (!findtxt) {
return false;
}
obj = {
searchStr:findtxt,
dir:1,
casesensitive:getMatchCase("matchCase")
};
if (!frCommond(obj)) {
var bk = editor.selection.getRange().createBookmark();
$G('search-msg').innerHTML = lang.getEnd;
editor.selection.getRange().moveToBookmark(bk).select();
}
};
$G("nextReplaceBtn").onclick = function (txt, dir, mcase) {
var findtxt = $G("findtxt1").value, obj;
if (!findtxt) {
return false;
}
obj = {
searchStr:findtxt,
dir:1,
casesensitive:getMatchCase("matchCase1")
};
frCommond(obj);
};
$G("preFindBtn").onclick = function (txt, dir, mcase) {
var findtxt = $G("findtxt").value, obj;
if (!findtxt) {
return false;
}
obj = {
searchStr:findtxt,
dir:-1,
casesensitive:getMatchCase("matchCase")
};
if (!frCommond(obj)) {
$G('search-msg').innerHTML = lang.getStart;
}
};
$G("preReplaceBtn").onclick = function (txt, dir, mcase) {
var findtxt = $G("findtxt1").value, obj;
if (!findtxt) {
return false;
}
obj = {
searchStr:findtxt,
dir:-1,
casesensitive:getMatchCase("matchCase1")
};
frCommond(obj);
};
//替换
$G("repalceBtn").onclick = function () {
var findtxt = $G("findtxt1").value.replace(/^\s|\s$/g, ""), obj,
replacetxt = $G("replacetxt").value.replace(/^\s|\s$/g, "");
if (!findtxt) {
return false;
}
if (findtxt == replacetxt || (!getMatchCase("matchCase1") && findtxt.toLowerCase() == replacetxt.toLowerCase())) {
return false;
}
obj = {
searchStr:findtxt,
dir:1,
casesensitive:getMatchCase("matchCase1"),
replaceStr:replacetxt
};
frCommond(obj);
};
//全部替换
$G("repalceAllBtn").onclick = function () {
var findtxt = $G("findtxt1").value.replace(/^\s|\s$/g, ""), obj,
replacetxt = $G("replacetxt").value.replace(/^\s|\s$/g, "");
if (!findtxt) {
return false;
}
if (findtxt == replacetxt || (!getMatchCase("matchCase1") && findtxt.toLowerCase() == replacetxt.toLowerCase())) {
return false;
}
obj = {
searchStr:findtxt,
casesensitive:getMatchCase("matchCase1"),
replaceStr:replacetxt,
all:true
};
var num = frCommond(obj);
if (num) {
$G('replace-msg').innerHTML = lang.countMsg.replace("{#count}", num);
}
};
//执行
var frCommond = function (obj) {
return editor.execCommand("searchreplace", obj);
};
switchTab("searchtab");
\ No newline at end of file
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="../internal.js"></script>
<style type="text/css">
*{color: #838383}
html,body {
font-size: 12px;
width:100%;
height:100%;
overflow: hidden;
margin:0px;
padding:0px;
}
h2 { font-size: 16px; margin: 20px auto;}
.content{
padding:5px 15px 0 15px;
height:100%;
}
dt,dd { margin-left: 0; padding-left: 0;}
dt a { display: block;
height: 30px;
line-height: 30px;
width: 55px;
background: #EFEFEF;
border: 1px solid #CCC;
padding: 0 10px;
text-decoration: none;
}
dt a:hover{
background: #e0e0e0;
border-color: #999
}
dt a:active{
background: #ccc;
border-color: #999;
color: #666;
}
dd { line-height:20px;margin-top: 10px;}
span{ padding-right:4px;}
input{width:210px;height:21px;background: #FFF;border:1px solid #d7d7d7;padding: 0px; margin: 0px; }
</style>
</head>
<body>
<div class="content">
<h2><var id="lang_showMsg"></var></h2>
<dl>
<dt><a href="../../third-party/snapscreen/UEditorSnapscreen.exe" target="_blank" id="downlink"><var id="lang_download"></var></a></dt>
<dd><var id="lang_step1"></var></dd>
<dd><var id="lang_step2"></var></dd>
</dl>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="../internal.js"></script>
<style type="text/css">
html,body{overflow:hidden;}
#specharsTab{width: 97%;margin: 10px auto; zoom:1;position: relative}
.tabbody {height:447px;}
.tabbody span{ margin: 5px 3px;text-align: center;display:inline-block;width: 40px;height:16px;line-height: 16px;cursor: pointer; }
</style>
</head>
<body>
<div id="specharsTab">
<div id="tabHeads" class="tabhead"></div><div id="tabBodys" class="tabbody"></div>
</div>
<script type="text/javascript" src="spechars.js"></script>
</body>
</html>
\ No newline at end of file
/**
* Created with JetBrains PhpStorm.
* User: xuheng
* Date: 12-9-26
* Time: 下午1:09
* To change this template use File | Settings | File Templates.
*/
var charsContent = [
{ name:"tsfh", title:lang.tsfh, content:toArray("、,。,·,ˉ,ˇ,¨,〃,々,—,~,‖,…,‘,’,“,”,〔,〕,〈,〉,《,》,「,」,『,』,〖,〗,【,】,±,×,÷,∶,∧,∨,∑,∏,∪,∩,∈,∷,√,⊥,∥,∠,⌒,⊙,∫,∮,≡,≌,≈,∽,∝,≠,≮,≯,≤,≥,∞,∵,∴,♂,♀,°,′,″,℃,$,¤,¢,£,‰,§,№,☆,★,○,●,◎,◇,◆,□,■,△,▲,※,→,←,↑,↓,〓,〡,〢,〣,〤,〥,〦,〧,〨,〩,㊣,㎎,㎏,㎜,㎝,㎞,㎡,㏄,㏎,㏑,㏒,㏕,︰,¬,¦,℡,ˊ,ˋ,˙,–,―,‥,‵,℅,℉,↖,↗,↘,↙,∕,∟,∣,≒,≦,≧,⊿,═,║,╒,╓,╔,╕,╖,╗,╘,╙,╚,╛,╜,╝,╞,╟,╠,╡,╢,╣,╤,╥,╦,╧,╨,╩,╪,╫,╬,╭,╮,╯,╰,╱,╲,╳,▁,▂,▃,▄,▅,▆,▇,�,█,▉,▊,▋,▌,▍,▎,▏,▓,▔,▕,▼,▽,◢,◣,◤,◥,☉,⊕,〒,〝,〞")},
{ name:"lmsz", title:lang.lmsz, content:toArray("ⅰ,ⅱ,ⅲ,ⅳ,ⅴ,ⅵ,ⅶ,ⅷ,ⅸ,ⅹ,Ⅰ,Ⅱ,Ⅲ,Ⅳ,Ⅴ,Ⅵ,Ⅶ,Ⅷ,Ⅸ,Ⅹ,Ⅺ,Ⅻ")},
{ name:"szfh", title:lang.szfh, content:toArray("⒈,⒉,⒊,⒋,⒌,⒍,⒎,⒏,⒐,⒑,⒒,⒓,⒔,⒕,⒖,⒗,⒘,⒙,⒚,⒛,⑴,⑵,⑶,⑷,⑸,⑹,⑺,⑻,⑼,⑽,⑾,⑿,⒀,⒁,⒂,⒃,⒄,⒅,⒆,⒇,①,②,③,④,⑤,⑥,⑦,⑧,⑨,⑩,㈠,㈡,㈢,㈣,㈤,㈥,㈦,㈧,㈨,㈩")},
{ name:"rwfh", title:lang.rwfh, content:toArray("ぁ,あ,ぃ,い,ぅ,う,ぇ,え,ぉ,お,か,が,き,ぎ,く,ぐ,け,げ,こ,ご,さ,ざ,し,じ,す,ず,せ,ぜ,そ,ぞ,た,だ,ち,ぢ,っ,つ,づ,て,で,と,ど,な,に,ぬ,ね,の,は,ば,ぱ,ひ,び,ぴ,ふ,ぶ,ぷ,へ,べ,ぺ,ほ,ぼ,ぽ,ま,み,む,め,も,ゃ,や,ゅ,ゆ,ょ,よ,ら,り,る,れ,ろ,ゎ,わ,ゐ,ゑ,を,ん,ァ,ア,ィ,イ,ゥ,ウ,ェ,エ,ォ,オ,カ,ガ,キ,ギ,ク,グ,ケ,ゲ,コ,ゴ,サ,ザ,シ,ジ,ス,ズ,セ,ゼ,ソ,ゾ,タ,ダ,チ,ヂ,ッ,ツ,ヅ,テ,デ,ト,ド,ナ,ニ,ヌ,ネ,ノ,ハ,バ,パ,ヒ,ビ,ピ,フ,ブ,プ,ヘ,ベ,ペ,ホ,ボ,ポ,マ,ミ,ム,メ,モ,ャ,ヤ,ュ,ユ,ョ,ヨ,ラ,リ,ル,レ,ロ,ヮ,ワ,ヰ,ヱ,ヲ,ン,ヴ,ヵ,ヶ")},
{ name:"xlzm", title:lang.xlzm, content:toArray("Α,Β,Γ,Δ,Ε,Ζ,Η,Θ,Ι,Κ,Λ,Μ,Ν,Ξ,Ο,Π,Ρ,Σ,Τ,Υ,Φ,Χ,Ψ,Ω,α,β,γ,δ,ε,ζ,η,θ,ι,κ,λ,μ,ν,ξ,ο,π,ρ,σ,τ,υ,φ,χ,ψ,ω")},
{ name:"ewzm", title:lang.ewzm, content:toArray("А,Б,В,Г,Д,Е,Ё,Ж,З,И,Й,К,Л,М,Н,О,П,Р,С,Т,У,Ф,Х,Ц,Ч,Ш,Щ,Ъ,Ы,Ь,Э,Ю,Я,а,б,в,г,д,е,ё,ж,з,и,й,к,л,м,н,о,п,р,с,т,у,ф,х,ц,ч,ш,щ,ъ,ы,ь,э,ю,я")},
{ name:"pyzm", title:lang.pyzm, content:toArray("ā,á,ǎ,à,ē,é,ě,è,ī,í,ǐ,ì,ō,ó,ǒ,ò,ū,ú,ǔ,ù,ǖ,ǘ,ǚ,ǜ,ü")},
{ name:"yyyb", title:lang.yyyb, content:toArray("i:,i,e,æ,ʌ,ə:,ə,u:,u,ɔ:,ɔ,a:,ei,ai,ɔi,əu,au,iə,εə,uə,p,t,k,b,d,g,f,s,ʃ,θ,h,v,z,ʒ,ð,tʃ,tr,ts,dʒ,dr,dz,m,n,ŋ,l,r,w,j,")},
{ name:"zyzf", title:lang.zyzf, content:toArray("ㄅ,ㄆ,ㄇ,ㄈ,ㄉ,ㄊ,ㄋ,ㄌ,ㄍ,ㄎ,ㄏ,ㄐ,ㄑ,ㄒ,ㄓ,ㄔ,ㄕ,ㄖ,ㄗ,ㄘ,ㄙ,ㄚ,ㄛ,ㄜ,ㄝ,ㄞ,ㄟ,ㄠ,ㄡ,ㄢ,ㄣ,ㄤ,ㄥ,ㄦ,ㄧ,ㄨ")}
];
(function createTab(content) {
for (var i = 0, ci; ci = content[i++];) {
var span = document.createElement("span");
span.setAttribute("tabSrc", ci.name);
span.innerHTML = ci.title;
if (i == 1)span.className = "focus";
domUtils.on(span, "click", function () {
var tmps = $G("tabHeads").children;
for (var k = 0, sk; sk = tmps[k++];) {
sk.className = "";
}
tmps = $G("tabBodys").children;
for (var k = 0, sk; sk = tmps[k++];) {
sk.style.display = "none";
}
this.className = "focus";
$G(this.getAttribute("tabSrc")).style.display = "";
});
$G("tabHeads").appendChild(span);
domUtils.insertAfter(span, document.createTextNode("\n"));
var div = document.createElement("div");
div.id = ci.name;
div.style.display = (i == 1) ? "" : "none";
var cons = ci.content;
for (var j = 0, con; con = cons[j++];) {
var charSpan = document.createElement("span");
charSpan.innerHTML = con;
domUtils.on(charSpan, "click", function () {
editor.execCommand("insertHTML", this.innerHTML);
dialog.close();
});
div.appendChild(charSpan);
}
$G("tabBodys").appendChild(div);
}
})(charsContent);
function toArray(str) {
return str.split(",");
}
body{
overflow: hidden;
width: 540px;
}
.wrapper {
margin: 10px auto 0;
font-size: 12px;
overflow: hidden;
width: 520px;
height: 315px;
}
.clear {
clear: both;
}
.wrapper .left {
float: left;
margin-left: 10px;;
}
.wrapper .right {
float: right;
border-left: 2px dotted #EDEDED;
padding-left: 15px;
}
.section {
margin-bottom: 15px;
width: 240px;
overflow: hidden;
}
.section h3 {
font-weight: bold;
padding: 5px 0;
margin-bottom: 10px;
border-bottom: 1px solid #EDEDED;
font-size: 12px;
}
.section ul {
list-style: none;
overflow: hidden;
clear: both;
}
.section li {
float: left;
width: 120px;;
}
.section .tone {
width: 80px;;
}
.section .preview {
width: 220px;
}
.section .preview table {
text-align: center;
vertical-align: middle;
color: #666;
}
.section .preview caption {
font-weight: bold;
}
.section .preview td {
border-width: 1px;
border-style: solid;
height: 22px;
}
.section .preview th {
border-style: solid;
border-color: #DDD;
border-width: 2px 1px 1px 1px;
height: 22px;
background-color: #F7F7F7;
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment