html标签编辑器,酷毙的html标签编辑器

心血来潮，写了这个玩具，以后有时间会逐步完善功能，作为前端的自由编辑工具，还是很好玩的。

function insertStyleSheet(styles, styleId) {

if (!document.getElementById(styleId)) {

var style = document.createElement("style");

style.id = styleId;

(document.getElementsByTagName("head")[0] || document.body).appendChild(style);

if (style.styleSheet) { //for ie

style.styleSheet.cssText = styles;

} else {//for w3c

style.appendChild(document.createTextNode(styles));

}

}

}

insertStyleSheet("html{cursor:text;*cursor:auto;width:100%;height:100%;margin:0;padding:0;}body{width:100%;height:100%;margin:0;padding:0;}.myFrame{box-shadow:0 0 18px #090;}", "myFrameStyle");

var myDrag = {};

myDrag.originX = myDrag.originY = myDrag.left = myDrag.top = myDrag.mousedown = 0;

myDrag.option = "d";

myDrag.cursor = "default";

//本方法经过一定优化，相对减少系统消耗

function setCursor(e, d) {

var o = myDrag.currObj;

if (o) {

d = d || 3;

var w = o.outerWidth()

, h = o.outerHeight()

, x = o.offset().left

, y = o.offset().top;

if((x - e.pageX) > d || (y - e.pageY) > d || (e.pageX - x - w) > d || (e.pageY - y - h) > d){

$('body').css("cursor", 'default');

myDrag.option = 'd';

return false;//目标外围

}

if((e.pageX - x) > d && (e.pageY - y) > d && (x + w - e.pageX) > d && (y + h - e.pageY) > d){

//$('body').css("cursor", 'move');

myDrag.option = 'm';

return false;//目标外围

}

var l = Math.abs(e.pageX - x)

, t = Math.abs(e.pageY - y)

, r = Math.abs(x + w - e.pageX)

, b = Math.abs(y + h - e.pageY);

if(l < d && t < d){

$('body').css("cursor", 'se-resize');

myDrag.option = 'lt';

return false;//目标左上角

}

if(r < d && b < d){

$('body').css("cursor", 'se-resize');

myDrag.option = 'rb';

return false;//目标右下角

}

if(r < d && t < d){

$('body').css("cursor", 'ne-resize');

myDrag.option = 'rt';

return false;//目标右上角

}

if(l < d && b < d){

$('body').css("cursor", 'ne-resize');

myDrag.option = 'lb';

return false;//目标左下角

}

if(l < d){

$('body').css("cursor", 'w-resize');

myDrag.option = 'l';

return false;//目标左

}

if(r < d){

$('body').css("cursor", 'w-resize');

myDrag.option = 'r';

return false;//目标右

}

if(t < d){

$('body').css("cursor", 's-resize');

myDrag.option = 't';

return false;//目标上

}

if(b < d){

$('body').css("cursor", 's-resize');

myDrag.option = 'b';

return false;//目标下

}

}

}

function dragDom(e) {

if (myDrag.option == 'm') {

myDrag.left += e.pageX - myDrag.originX;

myDrag.top += e.pageY - myDrag.originY;

myDrag.currObj.css({ top: myDrag.top, left: myDrag.left });

} else {

if (myDrag.option != "d") {

var o = myDrag.currObj;

if (myDrag.option == "l") {

myDrag.left += e.pageX - myDrag.originX;

o.css({ left: myDrag.left })

.width(o.width() - e.pageX + myDrag.originX);

}

if (myDrag.option == "t") {

myDrag.top += e.pageY - myDrag.originY;

o.css({ top: myDrag.top }).height(o.height() - e.pageY + myDrag.originY);

}

if (myDrag.option == "r") {

o.width(o.width() + e.pageX - myDrag.originX);

}

if (myDrag.option == "b") {

o.height(o.height() + e.pageY - myDrag.originY);

}

if (myDrag.option == "lt") {

myDrag.top += e.pageY - myDrag.originY;

myDrag.left += e.pageX - myDrag.originX;

o.css({ top: myDrag.top }).css({ left: myDrag.left })

.height(o.height() - e.pageY + myDrag.originY)

.width(o.width() - e.pageX + myDrag.originX);

}

if (myDrag.option == "rb") {

o.height(o.height() + e.pageY - myDrag.originY)

.width(o.width() + e.pageX - myDrag.originX);

}

if (myDrag.option == "lb") {

myDrag.left += e.pageX - myDrag.originX;

o.css({ left: myDrag.left })

.height(o.height() + e.pageY - myDrag.originY)

.width(o.width() - e.pageX + myDrag.originX);

}

if (myDrag.option == "rt") {

myDrag.top += e.pageY - myDrag.originY;

o.css({ top: myDrag.top })

.height(o.height() - e.pageY + myDrag.originY)

.width(o.width() + e.pageX - myDrag.originX);

}

}

}

}

$(document).on("click", function (e) {

var obj = e.originalEvent.srcElement;

var o = $(obj);

if ('myFrame' != o.attr('class') && !o.is('body')) {

if (myDrag.currObj) {

$(myDrag.currObj).css('border', myDrag.border);

}

o.css('position', 'relative').parent().css('position', 'relative');

myDrag.currObj = o;

myDrag.border = o.css('border');

o.css('border', '1px dashed red');

} else {

if (myDrag.currObj) {

$(myDrag.currObj).css('border', myDrag.border);

myDrag.currObj = null;

}

}

e.stopPropagation();

}).on("mousedown", function (e) {

if (myDrag.option != "d") {

myDrag.mousedown = 1;

var o = myDrag.currObj;

if (myDrag.option == "m") {

o.css("cursor", 'move');

}

myDrag.left = o.css("left") == 'auto' ? 0 : parseInt(o.css("left"));

myDrag.top = o.css("top") == 'auto' ? 0 : parseInt(o.css("top"));

myDrag.originX = e.pageX;

myDrag.originY = e.pageY;

}

e.stopPropagation();

}).on('mousemove', function (e) {

if (myDrag.mousedown == 0) {

if (myDrag.currObj) {

setCursor(e,5);

}

} else {

dragDom(e);

}

myDrag.originX = e.pageX;

myDrag.originY = e.pageY;

e.stopPropagation();

}).on('mouseup', function (e) {

myDrag.originX = myDrag.originY = myDrag.left = myDrag.top = myDrag.mousedown = 0;

if (myDrag.option == "m") {

$(myDrag.currObj).css("cursor", 'default');

}

e.stopPropagation();

}).on('keydown', function (e) {

if (myDrag.currObj) {

var o = myDrag.currObj;

switch (e.which) {

case 46 :{

if (confirm('Are you sure to delete it?')) {

o.parent().append(o.children());

o.remove();

}

} break;

case 37: {

myDrag.left -= 1;

o.css({ left: myDrag.left });

} break;

case 38: {

myDrag.top -= 1;

o.css({ top: myDrag.top });

} break;

case 39: {

myDrag.left += 1;

o.css({ left: myDrag.left });

} break;

case 40: {

myDrag.top += 1;

o.css({ top: myDrag.top });

} break;

default: break;

}

return false;

}

e.stopPropagation();

});