我有一个页面，允许人们根据预先构建的页面创建一个自定义页面（如果你愿意的话，可以是tempalte）
我有一个页面作为开始，客户可以自定义文本区域，图像，视频等。
这是我称之为“模板”的页面
<div id="templateContainer">
<script type="text/javascript">
var hexDigits = new Array
("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
$(document).ready(function() {
var editing = false;
$('.dragThis').each(function (i) {
if ($(this).attr('data-content-type') == 'text') {
$(this)
.resizable()
.css('color', $(this).attr('data-color-default'));
}
$(this)
.bind('dblclick', function () {
if (editing) return;
$('#area').val($(this).attr('id'));
if ($(this).attr('data-content-type') == 'text') {
editIT($(this));
} else if ($(this).attr('data-content-type') == 'image') {
changeImage($(this));
} else if ($(this).attr('data-content-type') == 'video-image') {
changeVideoImage($(this));
}
}).bind('click', function () {
$('#area').val($(this).attr('id'));
var styles = $(this).attr('style').split(';');
$.each(styles, function (i) {
var style = this.split(':');
var style0 = $.trim(style[0]);
var style1 = $.trim(style[1]);
alert(style1);
if (style0 == 'font-size') {
$('#controls #font-size option[value="' + style1 + '"]').attr('selected', true);
} else if (style0 == 'color') {
$('#controls #color option[value="' + rgb2hex(style1) + '"]').attr('selected', true);
} else if (style0 == 'text-align') {
$('#controls #text-align option[value="' + style1 + '"]').attr('selected', true);
}
});
});
});
});
function editIT(what) {
editing = true;
what = what.find("#edit");
what.html('<textarea id="text_' + what.attr('id') + '" style="width:' + what.css('width') + ';height:' + what.css('height') + ';">' + what.html() + '</textarea>');
$('#text_' + what.attr('id')).focus();
$('#text_' + what.attr('id')).blur(function () {
editing = false;
var newText = $(this).val().replace(/\r\n|\r|\n/g, "<br />");
what.html(newText);
});
}
//Function to convert hex format to a rgb color
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
function hex(x) {
return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}
function changeImage(what){
jPrompt('Using the "Image Library" on the left you must first find the image in there and then make any transformation you want to the imate. Once you are happy with yout final image, copy the URL at the bottom of the transformation screen and paste it here:',what.children().attr('src'),'Update Image', function(e) {
if(e && e != ''){
what.children().attr('src', e);
what.css('width', 'auto');
what.css('height', 'auto');
what.children().removeAttr('width');
what.children().removeAttr('height');
} else {
if(!e && e == ''){
jAlert('Leaving this field blank will keep the default image..', 'Image');
} else {
return false;
}
}
});
}
function changeVideoImage(what){
$('#changeVideoOrImageSection #newItemURL').val('');
$('#changeVideoOrImageSection').fadeIn(200);
}
</script>
<div id="startDragging" style="position:absolute; left:0px; top:0px; width:1014px; height:1144px;background-color:#fff;">
<div id="area_1" style="position:absolute; left:0px; top:0px; width:33px; height:213px;background:url(xxxxxxxxxxxxxxxxxx/tpl/landing_page_templates/Full_Page_Template/images/Landing_Template2_01.png) top left no-repeat;"></div>
<div id="area_2" style="position:absolute; left:983px; top:0px; width:31px; height:1144px;"> <img id="Landing_Template2_03" src="xxxxxxxxxxxxxxxxxx/tpl/landing_page_templates/Full_Page_Template/images/Landing_Template2_03.png" width="31" height="1144" alt=""> </div>
<div id="area_3" class="dragThis" style="position: absolute; left: 43px; top: 5px; width: auto; height: auto; overflow:hidden;" data-color-default="#000" data-font-default="Verdana" data-content-type="text"><div id="edit"><h1>Business Name</h1>123 Right Here Way<br>Tampa, FL 33607<br>info@yoursite.com<br>(813) 888-8888</div></div>
<div id="area_4" class="dragThis" style="position:absolute; left:717px; top:10px; width:236px; height:198px;" data-content-type="image"> <img id="Landing_Template2_06" src="xxxxxxxxxxxxxxxxxx/tpl/landing_page_templates/Full_Page_Template/images/Landing_Template2_06.png" width="236" height="198" alt=""> </div>
<div id="area_5" style="position:absolute; left:0px; top:213px; width:33px; height:61px;"> <img id="Landing_Template2_07" src="xxxxxxxxxxxxxxxxxx/tpl/landing_page_templates/Full_Page_Template/images/Landing_Template2_07.png" width="33" height="61" alt=""> </div>
<div id="area_6" style="position:absolute; left:0px; top:274px; width:32px; height:870px;"> <img id="Landing_Template2_09" src="xxxxxxxxxxxxxxxxxx/tpl/landing_page_templates/Full_Page_Template/images/Landing_Template2_09.png" width="32" height="870" alt=""> </div>
<div id="contentBG" style="background-color:#005b7f; position: relative; left:32px; top:213px;height:471px;width:951px">
<div id="area_7" class="dragThis" style="position: absolute; left: 203px; top: 2px; width: auto; height: auto; text-align: center; font-size: 40px; overflow:hidden;" data-color-default="#FFF" data-font-default="Verdana" data-content-type="text"><div id="edit">This is your Primary Heading</div></div>
<div id="area_8" class="dragThis" style="position: absolute; left: 0px; top: 49px; width: auto; height: auto; text-align: center; font-size: 18px; overflow:hidden;" data-color-default="#FFF" data-font-default="Verdana" data-content-type="text"><div id="edit">Text Block #1 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi</div></div>
<div id="area_9" class="dragThis" style="position:absolute; left:562px; top:163px; width:385px; height:303px;" data-content-type="video-image"> <img id="Landing_Template2_12" src="xxxxxxxxxxxxxxxxxx/tpl/landing_page_templates/Full_Page_Template/images/Landing_Template2_12.png" width="385" height="303" alt=""> </div>
<div id="area_10" class="dragThis" style="position: absolute; left: 5px; top: 185px; width: auto; height: auto; text-align: left; font-size: 40px; overflow:hidden;" data-color-default="#e2e2e2" data-font-default="Verdana" data-content-type="text"><div id="edit">Heading #2</div></div>
<div id="area_11" class="dragThis" style="position: absolute; left: 6px; top: 218px; width: auto; height: auto; text-align: left; font-size: 18px; overflow:hidden;" data-color-default="#FFF" data-font-default="Verdana" data-content-type="text"><div id="edit"><ul><li>Text block #2. Quis que tincidunt lectus vel enim</li><li>Donec cursus egestas adipiscing.</li><li>Vivamus aliquam erat non massa ullamcorper</li></ul><p>Quam erat non massa ullamcorper, vel pulvinar nibh lobortis.<br>Interdum et malesuada fames ac ante ipsum primis in faucibus.<br>Maecenas augue lorem, aliquam sit amet faucibus vel, gravida<br>fringilla sem. Fusce ullamcorper, risus at rhoncus eleifend, erat turpis<br>iaculis erat, vitae luctus dolor nisl sed mi. Maecenas cursus et lectus<br>sit amet cursus.</p></div></div>
</div>
<div id="area_13" style="position:absolute; left:32px; top:684px; width:951px; height:15px;"> <img id="Landing_Template2_18" src="xxxxxxxxxxxxxxxxxx/tpl/landing_page_templates/Full_Page_Template/images/Landing_Template2_18.png" width="951" height="15" alt=""> </div>
<div id="area_14" class="dragThis" style="position: absolute; left: 212px; top: 701px; width: auto; height: auto; color: rgb(0, 91, 127); text-align: center; font-size: 40px; overflow:hidden;" data-color-default="#005b7f" data-font-default="Verdana" data-content-type="text"><div id="edit">Fill out the form below to sign up</div></div>
<div id="area_15" class="dragThis" style="position:absolute;left:361px;top:757px;padding:20px;">
<form method="post" id="optForm" action="https://jdvinnovations.locmktsys.com/optin.php">
<div id="formArea" style="padding:10px;height:auto;border-radius: 5px;box-shadow: 0px 0px 25px #333;background-color:#FFF;">
<div id="formLeft" style="float:left;padding: 10px;"> <span style="padding:5px;font-size:14px;">
<label for="email">Email:<br />
<input type="text" name="email" id="email" class="thisInput" value="">
</label>
<br>
</span> </div>
<div id="formRight" style="float:right;padding: 10px;"> </div>
<div id="formBottom" style="clear:both;text-align:center;">
<input type="submit" style="width: 75px;padding: 4px; border: 1px solid #828282; color: #828282;border-radius: 5px;font-family: Arial;font-size: 14px;" value="Submit">
</div>
</div>
<input type="hidden" name="page" id="page" value="33">
<input type="hidden" name="page_type" id="page_type" value="new">
<input type="hidden" name="tag" id="tag" value="new_landing_page" />
</form>
</div>
<div id="area_16" style="position:absolute; left:32px; top:1109px; width:951px; height:35px;"> <img id="Landing_Template2_23" src="xxxxxxxxxxxxxxxxxx/tpl/landing_page_templates/Full_Page_Template/images/Landing_Template2_23.png" width="951" height="35" alt=""> </div>
</div>
</div>
然后我在另一个div中的页面上有控件，允许用户更改文本颜色和字体大小等内容。
我已从代码中移除了.draggable('parnet')，因为它搞乱了所有内容。
单击一下就不会关闭编辑，如果我双击另一个编辑区域，它们都将是textareas然后当我点击它们时它们都会继承相同的值。
有什么我可以做的或改变程序明智会使这更好吗？
我是一个半新的jquery，这是复杂的（我知道这不是很复杂）。
任何事情都会有所帮助..甚至指向教程或文档。
先谢谢你。
我可以根据要求提供对实际页面的访问权限。我不想广播链接..