code editor

در این پست ادیتور پیشرفته 1 لرن را قرار داده ایم!

این ویرایشگر آنلاین کد های html است!

امکانات:

امکان ساخت ادرس دمو!

امکان نمایش دمو در دو حالت {پاپ آپ/ای فریم}

امکان انتخاب کد ها !!

———–

و استایل بسیار زیبا و جذاب!

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ویرایش گر آنلاین</title>
<style type="text/css">
body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-size: 13px;
   margin: 0;
   padding: 0;
}
</style>
<style type="text/css">
a
{
   color: #0000FF;
   text-decoration: underline;
}
a:visited
{
   color: #800080;
}
a:active
{
   color: #FF0000;
}
a:hover
{
   color: #0000FF;
   text-decoration: underline;
}
</style>
<link href=".css" rel="stylesheet" type="text/css">
<style type="text/css">
#Layer2
{
   background-color: transparent;
   border-top-width: 3px;
   border-right-width: 10px;
   border-bottom-width: 3px;
   border-left-width: 10px;
   border-top-style: dotted;
   border-right-style: solid;
   border-bottom-style: dotted;
   border-left-style: solid;
   border-top-color: #191970;
   border-right-color: #C71585;
   border-bottom-color: #191970;
   border-left-color: #C71585;
   border-top-left-radius: 0px;
   border-top-right-radius: 50px;
   border-bottom-right-radius: 0px;
   border-bottom-left-radius: 50px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   -moz-box-shadow: 0px 0px 10px #0000CD;
   -webkit-box-shadow: 0px 0px 10px #0000CD;
   box-shadow: 0px 0px 10px #0000CD;
}
#code
{
   border: 1px #FFFFFF solid;
   background-color: transparent;
   color :#000000;
   font-family: Arial;
   font-size: 13px;
   text-align: left;
   resize: none;
}
#code:hover
{
   background-color: #DCDCDC;
   border-color: #696969;
   -webkit-transition: background-color 500ms linear 0ms, border-color 500ms linear 0ms;
   -moz-transition: background-color 500ms linear 0ms, border-color 500ms linear 0ms;
   -ms-transition: background-color 500ms linear 0ms, border-color 500ms linear 0ms;
   transition: background-color 500ms linear 0ms, border-color 500ms linear 0ms;
}
#wb_demo
{
   background-color: #FAFAFA;
   border-top-width: 3px;
   border-right-width: 10px;
   border-bottom-width: 3px;
   border-left-width: 10px;
   border-top-style: dotted;
   border-right-style: solid;
   border-bottom-style: dotted;
   border-left-style: solid;
   border-top-color: #008B8B;
   border-right-color: #C71585;
   border-bottom-color: #008B8B;
   border-left-color: #C71585;
   border-top-left-radius: 100px;
   border-top-right-radius: 100px;
   border-bottom-right-radius: 100px;
   border-bottom-left-radius: 100px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   -moz-box-shadow: 0px 0px 5px #C71585;
   -webkit-box-shadow: 0px 0px 5px #C71585;
   box-shadow: 0px 0px 5px #C71585;
}
#Layer1
{
   background-color: transparent;
   border-top-width: 3px;
   border-right-width: 10px;
   border-bottom-width: 3px;
   border-left-width: 10px;
   border-top-style: dotted;
   border-right-style: solid;
   border-bottom-style: dotted;
   border-left-style: solid;
   border-top-color: #191970;
   border-right-color: #C71585;
   border-bottom-color: #191970;
   border-left-color: #C71585;
   border-top-left-radius: 0px;
   border-top-right-radius: 50px;
   border-bottom-right-radius: 0px;
   border-bottom-left-radius: 50px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   -moz-box-shadow: 0px 0px 10px #008000;
   -webkit-box-shadow: 0px 0px 10px #008000;
   box-shadow: 0px 0px 10px #008000;
}
#Line1
{
   color: #A0A0A0;
   background-color: #A0A0A0;
   border-width: 0px;
}
#Shape1
{
   width: 120px;
   height: 240px;
   background-color: #008B8B;
   background: -moz-linear-gradient(bottom,#008B8B 0%,#C0C0C0 100%);
   background: -webkit-linear-gradient(bottom,#008B8B 0%,#C0C0C0 100%);
   background: -o-linear-gradient(bottom,#008B8B 0%,#C0C0C0 100%);
   background: -ms-linear-gradient(bottom,#008B8B 0%,#C0C0C0 100%);
   background: linear-gradient(bottom,#008B8B 0%,#C0C0C0 100%);
   border: 0px #008B8B solid;
}
#Shape1_text
{
   position: absolute;
   left: 1px;
   top: 98px;
   width: 118px;
   height: 141px;
   overflow: hidden;
   text-align: center;
}
#Shape1:hover
{
   background-color: #20B2AA;
   -webkit-transition: background-color 500ms linear 0ms;
   -moz-transition: background-color 500ms linear 0ms;
   -ms-transition: background-color 500ms linear 0ms;
   transition: background-color 500ms linear 0ms;
}
#Layer3
{
   background-color: transparent;
   border-top-width: 3px;
   border-right-width: 10px;
   border-bottom-width: 3px;
   border-left-width: 10px;
   border-top-style: dotted;
   border-right-style: solid;
   border-bottom-style: dotted;
   border-left-style: solid;
   border-top-color: #191970;
   border-right-color: #C71585;
   border-bottom-color: #191970;
   border-left-color: #C71585;
   border-top-left-radius: 0px;
   border-top-right-radius: 50px;
   border-bottom-right-radius: 0px;
   border-bottom-left-radius: 50px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   -moz-box-shadow: 0px 0px 10px #008B8B;
   -webkit-box-shadow: 0px 0px 10px #008B8B;
   box-shadow: 0px 0px 10px #008B8B;
}
#wb_Text2 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
   text-align: left;
}
#wb_Text2 div
{
   text-align: left;
}
#Button3
{
   border-top-width: 0px;
   border-right-width: 5px;
   border-bottom-width: 0px;
   border-left-width: 5px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   border-top-color: #000000;
   border-right-color: #9932CC;
   border-bottom-color: #000000;
   border-left-color: #9932CC;
   border-top-left-radius: 50px;
   border-top-right-radius: 50px;
   border-bottom-right-radius: 50px;
   border-bottom-left-radius: 50px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   background-color: transparent;
   color: #000000;
   font-family: 'B Homa';
   font-size: 15px;
   -moz-box-shadow: 0px 0px 5px #0000FF;
   -webkit-box-shadow: 0px 0px 5px #0000FF;
   box-shadow: 0px 0px 5px #0000FF;
}
#Button5
{
   border-top-width: 0px;
   border-right-width: 5px;
   border-bottom-width: 0px;
   border-left-width: 5px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   border-top-color: #000000;
   border-right-color: #C71585;
   border-bottom-color: #000000;
   border-left-color: #C71585;
   border-top-left-radius: 50px;
   border-top-right-radius: 50px;
   border-bottom-right-radius: 50px;
   border-bottom-left-radius: 50px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   background-color: transparent;
   color: #000000;
   font-family: 'B Homa';
   font-size: 15px;
   -moz-box-shadow: 0px 0px 5px #C71585;
   -webkit-box-shadow: 0px 0px 5px #C71585;
   box-shadow: 0px 0px 5px #C71585;
}
#Button6
{
   border-top-width: 0px;
   border-right-width: 5px;
   border-bottom-width: 0px;
   border-left-width: 5px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   border-top-color: #000000;
   border-right-color: #6DE9C4;
   border-bottom-color: #6DE9C4;
   border-left-color: #6DE9C4;
   border-top-left-radius: 50px;
   border-top-right-radius: 50px;
   border-bottom-right-radius: 50px;
   border-bottom-left-radius: 50px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   background-color: transparent;
   color: #000000;
   font-family: 'B Homa';
   font-size: 15px;
   -moz-box-shadow: 0px 0px 5px #6DE9C4;
   -webkit-box-shadow: 0px 0px 5px #6DE9C4;
   box-shadow: 0px 0px 5px #6DE9C4;
}
#button8
{
   border-top-width: 0px;
   border-right-width: 5px;
   border-bottom-width: 0px;
   border-left-width: 5px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   border-top-color: #FFFFFF;
   border-right-color: #BC8F8F;
   border-bottom-color: #FFFFFF;
   border-left-color: #BC8F8F;
   border-top-left-radius: 50px;
   border-top-right-radius: 50px;
   border-bottom-right-radius: 50px;
   border-bottom-left-radius: 50px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   background-color: transparent;
   color: #000000;
   font-family: 'B Homa';
   font-size: 15px;
   -moz-box-shadow: 0px 0px 5px #0000FF;
   -webkit-box-shadow: 0px 0px 5px #0000FF;
   box-shadow: 0px 0px 5px #0000FF;
}
#amirdemourl
{
   border-top-width: 1px;
   border-right-width: 3px;
   border-bottom-width: 1px;
   border-left-width: 3px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   border-top-color: #C71585;
   border-right-color: #008B8B;
   border-bottom-color: #C71585;
   border-left-color: #008B8B;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
   background-color: #FFFFFF;
   color :#000000;
   font-family: Arial;
   font-size: 13px;
   text-align: left;
   vertical-align: middle;
}
#Button7
{
   border-top-width: 0px;
   border-right-width: 5px;
   border-bottom-width: 0px;
   border-left-width: 5px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   border-top-color: #FFFFFF;
   border-right-color: #800000;
   border-bottom-color: #FFFFFF;
   border-left-color: #800000;
   border-top-left-radius: 50px;
   border-top-right-radius: 50px;
   border-bottom-right-radius: 50px;
   border-bottom-left-radius: 50px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   background-color: transparent;
   color: #000000;
   font-family: 'B Homa';
   font-size: 15px;
   -moz-box-shadow: 0px 0px 5px #0000FF;
   -webkit-box-shadow: 0px 0px 5px #0000FF;
   box-shadow: 0px 0px 5px #0000FF;
}
#Button8
{
   border-top-width: 0px;
   border-right-width: 5px;
   border-bottom-width: 0px;
   border-left-width: 5px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   border-top-color: #000000;
   border-right-color: #000000;
   border-bottom-color: #000000;
   border-left-color: #000000;
   border-top-left-radius: 50px;
   border-top-right-radius: 50px;
   border-bottom-right-radius: 50px;
   border-bottom-left-radius: 50px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   background-color: transparent;
   color: #000000;
   font-family: 'B Homa';
   font-size: 15px;
   -moz-box-shadow: 0px 0px 5px #000000;
   -webkit-box-shadow: 0px 0px 5px #000000;
   box-shadow: 0px 0px 5px #000000;
}
#amireditorpreviw
{
   border: 0px #000000 solid;
}
#Layer4
{
   background-color: #FFFFFF;
   border-top-width: 3px;
   border-right-width: 10px;
   border-bottom-width: 3px;
   border-left-width: 10px;
   border-top-style: dotted;
   border-right-style: solid;
   border-bottom-style: dotted;
   border-left-style: solid;
   border-top-color: #191970;
   border-right-color: #C71585;
   border-bottom-color: #191970;
   border-left-color: #C71585;
   border-top-left-radius: 0px;
   border-top-right-radius: 50px;
   border-bottom-right-radius: 0px;
   border-bottom-left-radius: 50px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   -moz-box-shadow: 0px 0px 10px #0000CD;
   -webkit-box-shadow: 0px 0px 10px #0000CD;
   box-shadow: 0px 0px 10px #0000CD;
}
#wb_Text4 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
   text-align: left;
}
#wb_Text4 div
{
   text-align: left;
}
#Button9
{
   border-top-width: 0px;
   border-right-width: 5px;
   border-bottom-width: 0px;
   border-left-width: 5px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   border-top-color: #000000;
   border-right-color: #0000CD;
   border-bottom-color: #000000;
   border-left-color: #0000FF;
   border-top-left-radius: 50px;
   border-top-right-radius: 50px;
   border-bottom-right-radius: 50px;
   border-bottom-left-radius: 50px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   background-color: transparent;
   color: #000000;
   font-family: 'B Homa';
   font-size: 15px;
   -moz-box-shadow: 0px 0px 5px #0000FF;
   -webkit-box-shadow: 0px 0px 5px #0000FF;
   box-shadow: 0px 0px 5px #0000FF;
}
#AdvancedButton1
{
   border: 0px #A9A9A9 solid;
   background-color: transparent;
}
#savingcode
{
   background-color: #FAFAFA;
   border-top-width: 0px;
   border-right-width: 2px;
   border-bottom-width: 0px;
   border-left-width: 2px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   border-top-color: #000000;
   border-right-color: #C71585;
   border-bottom-color: #008B8B;
   border-left-color: #C71585;
   border-top-left-radius: 30px;
   border-top-right-radius: 30px;
   border-bottom-right-radius: 30px;
   border-bottom-left-radius: 30px;
}
#Button1
{
   border-top-width: 0px;
   border-right-width: 5px;
   border-bottom-width: 0px;
   border-left-width: 5px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   border-top-color: #000000;
   border-right-color: #FF1493;
   border-bottom-color: #000000;
   border-left-color: #FF1493;
   border-top-left-radius: 50px;
   border-top-right-radius: 50px;
   border-bottom-right-radius: 50px;
   border-bottom-left-radius: 50px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   background-color: transparent;
   color: #000000;
   font-family: 'B Homa';
   font-size: 15px;
   -moz-box-shadow: 0px 0px 5px #C71585;
   -webkit-box-shadow: 0px 0px 5px #C71585;
   box-shadow: 0px 0px 5px #C71585;
}
</style>
<script type="text/javascript" src="http://dl.1learn.ir/amirreza/editor/wwb9.min.js"></script>
<script>
function preview() {
temp = document.demo.code.value;
preWindow = open("",
"preWindow"," menubar=yes, scrollbars=yes");
preWindow.document.open();
preWindow.document.write(temp);
preWindow.document.close(); 
}; 
 
</script>
<script>
function amireditorview(){amireditorpreviw.document.open();amireditorpreviw.document.write(document.getElementById('code').value);amireditorpreviw.document.close();}function demo(){var url = document.URL;url = url.substring(url.indexOf("$$"), url.indexOf("$$$"));url = url.replace('$$','');url = unescape(url);document.getElementById('code').value = url;amireditorview();}window.onload=demo;function amirmkurl(){document.getElementById('savingcode').style.display = 'block';document.getElementById('amirdemourl').value = document.URL + '#$$' + escape(document.getElementById('code').value) + '$$$';}</script>
</head>
<body>
<div id="Layer2" style="position:absolute;text-align:center;left:254px;top:19px;width:944px;height:78px;z-index:19;" title="">
<div id="Layer2_Container" style="width:944px;position:relative;margin-left:auto;margin-right:auto;text-align:left;">
<div id="wb_Text4" style="position:absolute;left:356px;top:15px;width:345px;height:49px;z-index:0;text-align:left;">
<span style="color:#000000;font-family:'B Elham';font-size:37px;">ویرایش گر آنلاین| یک لرن</span></div>
</div>
</div>
<div id="wb_demo" style="position:absolute;left:254px;top:120px;width:682px;height:489px;z-index:20;">
<form name="demo" method="post" action="" id="demo">
<hr id="Line1" style="margin:0;padding:0;position:absolute;left:31px;top:19px;width:21px;height:402px;z-index:5;">
<input type="button" id="Button8" onclick="ShowObject('Layer4', 1);amireditorview();return false;" name="" value="دمو در ای فریم" style="position:absolute;left:164px;top:431px;width:112px;height:41px;z-index:6;">
<input type="button" id="Button9" onclick="preview();return false;" name="" value="دمو پاپ آپ" style="position:absolute;left:29px;top:431px;width:112px;height:41px;z-index:7;">
<textarea name="code" id="code" onkeyup="amireditorview();return false;" style="position:absolute;left:61px;top:20px;width:618px;height:399px;z-index:8;" rows="23" cols="97"></textarea>
<div id="savingcode" style="position:absolute;text-align:left;visibility:hidden;left:220px;top:211px;width:389px;height:175px;z-index:9;" title="">
<input type="button" id="Button3" name="" value="ادرس دمو شما" style="position:absolute;left:11px;top:11px;width:317px;height:34px;z-index:1;">
<input type="button" id="Button7" onclick="ShowObject('savingcode', 0);return false;" name="" value="X" style="position:absolute;left:336px;top:11px;width:47px;height:34px;z-index:2;">
<input type="text" id="amirdemourl" style="position:absolute;left:15px;top:61px;width:359px;height:41px;line-height:41px;z-index:3;" name="amirdemourl" value="">
<input type="button" id="button8" onclick="amirmkurl();return false;" name="" value="ساخت ادرس" style="position:absolute;left:103px;top:118px;width:191px;height:42px;z-index:4;">
</div>
<input type="button" id="Button5" onclick="ShowObject('savingcode', 1);return false;" onmouseup="amirmkurl();return false;" name="" value="ساخت ادرس دمو" style="position:absolute;left:495px;top:431px;width:159px;height:41px;z-index:10;">
<input type="button" id="Button1" onclick="javascript:this.form.code.focus();this.form.code.select();return false;" name="" value="انتخاب کد ها" style="position:absolute;left:293px;top:431px;width:168px;height:41px;z-index:11;">
</form>
</div>
<div id="Layer1" style="position:absolute;text-align:center;left:966px;top:120px;width:232px;height:489px;z-index:21;" title="">
<div id="Layer1_Container" style="width:232px;position:relative;margin-left:auto;margin-right:auto;text-align:left;">
<div id="wb_Shape1" style="position:absolute;left:54px;top:106px;width:120px;height:240px;z-index:12;">
<a href="http://1learn.ir"><div id="Shape1"><div id="Shape1_text"><span style="color:#000000;font-family:'B Elham';font-size:32px;">یک لرن.آی ار</span></div></div></a></div>
</div>
</div>
<div id="Layer3" style="position:absolute;text-align:center;left:254px;top:635px;width:944px;height:59px;z-index:22;" title="">
<div id="Layer3_Container" style="width:944px;position:relative;margin-left:auto;margin-right:auto;text-align:left;">
</div>
</div>
<div id="wb_Text2" style="position:absolute;left:1010px;top:641px;width:208px;height:49px;z-index:23;text-align:left;">
<span style="color:#000000;font-family:'B Homa';font-size:27px;">طراح ابزار</span><span style="color:#000000;font-family:'B Elham';font-size:27px;">:<a href="http://1learn.ir">یک لرن</a></span></div>
<div id="Layer4" style="position:absolute;text-align:center;visibility:hidden;left:254px;top:120px;width:683px;height:489px;z-index:24;" title="">
<div id="Layer4_Container" style="width:683px;position:relative;margin-left:auto;margin-right:auto;text-align:left;">
<input type="button" id="Button6" onclick="ShowObject('Layer4', 0);return false;" name="" value="بستن" style="position:absolute;left:2px;top:10px;width:65px;height:40px;z-index:13;">
<iframe name="amireditorpreviw" id="amireditorpreviw" style="position:absolute;left:4px;top:67px;width:675px;height:413px;z-index:14;" src="" frameborder="0"></iframe>
</div>
</div>
<button id="AdvancedButton1" onclick="document.getElementById('savingcode').style.display = 'none';return false;" type="button" name="" value="" style="position:absolute;left:162px;top:120px;width:30px;height:21px;z-index:25;">
<div style="text-align:center">&nbsp;</div>
</button>
</body>
</html>

فرادرس

برچسب ها : ، ،