วิธีการสร้าง HTML, CSS, JS แก้ไขรหัสการใช้ jQuery

มีจำนวนมากเป็นHTML บริการแก้ไขในเว็บ . บางส่วนของบริการที่เป็นที่นิยมJsFiddle และ JsBin เว็บไซต์เหล่านี้มีฟังก์ชั่นการบันทึกบัญชีของคุณเกินไป ถ้าคุณต้องการที่จะสร้างเว็บไซต์เช่นJSFiddleแล้วคุณจะอยู่ที่สถานที่ที่เหมาะสม ฉันจะบอกคุณถึงวิธีการสร้างพื้นฐานHTML ซอฟต์แวร์แก้ไขโดยใช้jQuery . ซอฟแวร์นี้ยังมีบริการตัวอย่างสดซึ่งหมายความว่าผู้ใช้ไม่จำเป็นต้องส่งแบบฟอร์มรหัสทุกครั้ง ตัวอย่างที่มีการปรับปรุงโดยอัตโนมัติโดยใช้jQuery 's keyup เรียกยกเว้นJSปรับปรุงรหัสเพราะJavascript ไม่สามารถเพิ่มเวลาในขณะที่ผู้ใช้บางสิ่งบางอย่างเพราะจะมีทุกรูปแบบ ข้อผิดพลาด

เราจะสร้างตารางที่มีHTML โค้ดCSS รหัสJS รหัส textareas .
นี่คือเต็มHTML รหัส:

<script src="http://code.jquery.com/jquery-latest.min.js"> </ script> <script src="htmleditor.js"> </ script> <table> <tbody> <tr > <td> <h2> HTML </ h2> <textarea class="codes" id="html" placeholder="Your HTML รหัส HERE"> </ textarea> </ td> <td> <h2> CSS </ h2> <textarea class="codes" id="css" placeholder="Your CSS รหัส HERE"> </ textarea> </ td> </ tr> <h2> JS </ h2> < ชั้น textarea = "รหัส" id = "js" ยึด = "รหัสจาวาสคริปต์ของคุณที่นี่"> </ textarea> </ td> <td> <h2> ตัวอย่าง </ h2> <iframe id = "ตัวอย่าง" src = "javascript :; "> </ iframe> </ td> </ tr> <div style="text-align:right;"> <ใส่ id =" upjs "ชนิด =" ปุ่ม "value =" ปรับปรุงและเรียก JS "/> </ div> </ td> </ tr> </ tbody> รหัส, # ตัวอย่าง </ table> <style> {width:. 320px; ความสูง: 135px; ชายแดน: 2px ประสีขาว พื้นหลัง: สีขาวสีดำล้น: auto;} </ style>

htmleditor.js


... $ (เอกสาร) พร้อม (function () {var p = $ ("# ตัวอย่าง") เนื้อหา () หา ("ร่างกาย"); p.css ("ขอบ", "2px"); p.html ( '<span id="htmlpr"> </ span> <style id="csspr"> </ style>'); $ (". html ที่ #") เมื่อวันที่ ('keyup', function () {p.find ( "# htmlpr") html ที่ ($ (นี้) วาล ());..});.. $ ("# CSS") เมื่อวันที่ ('keyup', function () {p.find ("# csspr") html ที่ ($ (นี้) วาล ().);}); $ ("# js") เมื่อวันที่ ('เปลี่ยน' ฟังก์ชั่น (.) {p.find ("# Jspr") ลบ ();. p.append ( ". $ (เอกสาร) พร้อม (ฟังก์ชัน () '<script id="jspr">' + {". + $ (นี้) วาล () + "});" + '</ script>');}) . $ ("# upjs") เมื่อวันที่ ('คลิก', function () {p.find ("# Jspr") ลบ ();. p.append ('<script id="jspr">' + "$ . (เอกสาร) พร้อม (function () {"+ $ (" # js ".) วาล () +"}); "+ '</ script>');});});

jQuery รหัสน้อยเกินไป jQuery รหัสเป็นเพียงผูกพันบางkeyup ฟังก์ชั่นและการผนวกHTML รหัสเพื่อแสดงตัวอย่าง iframe .
หากคุณมีปัญหาใด ๆ / ข้อเสนอแนะ / ข้อเสนอแนะเกี่ยวกับการเขียนความเห็น ฉันอยู่ที่นี่ 10/7