اليوم اقدم لكم محرر بسيط جدا وجميل ومفيد للغاية لكل مدون ومبرمج ..
كل ما عليك هو نسخ هذا الكود الموجود بالأسفل الى الصفحة التى تريد ان يظهر بها المحرر
مثال على المحرر هنا
<div class="post hentry">
<a name="8811546607569798962"></a>
<span itemprop="itemreviewed"><span itemprop="description">
<h3 class="post-title entry-title">
HTML Editor
</h3>
</span></span>
<div class="post-header">
<div class="post-header-line-1" style="padding:0 15px;margin-bottom:10px;">
<div class="authordata"><span class="post-author vcard">
</span>, <span class="post-timestamp">
</span>
</div>
<div class="commentsdata"><span class="post-comment-link">
</span>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div class="post-body entry-content">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br></div>
<table style="width: 330px;">
<tbody>
<tr><td valign="top"><form method="post" name="form1">
<textarea name="code" onclick="focus(this.code)" style="border-radius: 3px; border: solid 1px #cccccc; color: #a3a3a3; font-family: arial; font-size: 12px; font-weight: bold; height: 500px; margin: 0px; padding: 5px; scroll: auto; width: 200px;"><style>
Add CSS Code Here
</style>
Add HTML Code Here</textarea>
</form>
</td><td valign="top"><iframe frameborder="0" name="preview" src="about:blank" style="background: #ffffff; border-radius: 3px; border: solid 1px #cccccc; height: 500px; padding: 5px; width: 315px;">
</iframe>
</td>
</tr>
</tbody></table>
<br>
<button onclick="preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">
Preview</button>
<button id="#send" onclick="window.document.form1.code.value='';preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">
Clear </button>
<br>
<br>
<br>
<br>
<br></div>
<div style="clear: both;"></div>
</div>
<div class="post-footer">
<div class="post-footer-line post-footer-line-1">
<span class="post-icons">
<span class="item-control blog-admin pid-527409205">
<a href="https://www.blogger.com/page-edit.g?blogID=487386897649934372&pageID=8811546607569798962&from=pencil" title="Edit Page" target="_blank">
<img alt="" class="icon-action" height="18" src="http://img2.blogblog.com/img/icon18_edit_allbkg.gif" width="18">
</a>
</span>
</span>
<div class="post-share-buttons">
<a class="goog-inline-block share-button sb-email" href="https://www.blogger.com/share-post.g?blogID=487386897649934372&pageID=8811546607569798962&target=email" target="_blank" title="Email This">
<span class="share-button-link-text">Email This</span>
</a><a class="goog-inline-block share-button sb-blog" href="https://www.blogger.com/share-post.g?blogID=487386897649934372&pageID=8811546607569798962&target=blog" onclick="window.open(this.href, "_blank", "height=270,width=475"); return false;" target="_blank" title="BlogThis!">
<span class="share-button-link-text">BlogThis!</span>
</a><a class="goog-inline-block share-button sb-twitter" href="https://www.blogger.com/share-post.g?blogID=487386897649934372&pageID=8811546607569798962&target=twitter" target="_blank" title="Share to Twitter">
<span class="share-button-link-text">Share to Twitter</span>
</a><a class="goog-inline-block share-button sb-facebook" href="https://www.blogger.com/share-post.g?blogID=487386897649934372&pageID=8811546607569798962&target=facebook" onclick="window.open(this.href, "_blank", "height=430,width=640"); return false;" target="_blank" title="Share to Facebook">
<span class="share-button-link-text">Share to Facebook</span>
</a>
<div class="goog-inline-block dummy-container"><div id="___plusone_0" style="text-indent: 0px; margin: 0px; padding: 0px; background: transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 300px; height: 20px;"><iframe ng-non-bindable="" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 300px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 20px;" tabindex="0" vspace="0" width="100%" id="I0_1485616993910" name="I0_1485616993910" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&source=blogger%3Ablog%3Aplusone&size=medium&width=300&annotation=inline&hl=en&origin=http%3A%2F%2Fbbloggertutorials.blogspot.com.eg&url=http%3A%2F%2Fbbloggertutorials.blogspot.com%2Fp%2Fhtml-editor_23.html&gsrc=3p&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.ar.fRV-S-MQ0dQ.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCOoopkHr5NM_cofk4696iiBjgghQw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1485616993910&parent=http%3A%2F%2Fbbloggertutorials.blogspot.com.eg&pfname=&rpctoken=34415339" data-gapiattached="true" title="+1"></iframe></div></div>
</div>
</div>
<div class="post-footer-line post-footer-line-2"><span class="post-labels">
</span>
</div>
<div class="post-footer-line post-footer-line-3"><span class="post-location">
</span>
</div>
</div>
</div>
ليست هناك تعليقات:
إرسال تعليق
نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات