नमस्कार दोस्तों मेरा नाम है रहमान और मैं हूँ TryTechInfo का Founder तो चलिए शुरू करते है। दोस्तों इस पोस्ट में मैं आपको बताने वाला हूँ की Try Editor क्या है। Try it Editor कैसे और क्यों बनाते है। तो आइये जान लेते है हमारे इस पोस्ट में Tryit Edotor बनाने और उसे अपनी वेबसाइट ब्लॉग में add करने के बारे में।
दोस्तों अक्सर आपने W3 School नामक वेबसाइट में एक Try Editor देखा होगा जहां पर आप कोई भी कोडिंग करके आसानी पूर्वक उसका Output यानि के उसका ( परिणाम ) देख सकते है।
लेकिन कुछ लोगो के मन में एक सवाल खलबली तो मचाता ही होगा। की आखिर यह Try Editor कैसे बनाया जाता है। तो यदि यह सवाल आपके मन में भी है, तो इस पोस्ट को पढ़ते रहिये।
Try Editor क्या है?
Try editor ek lightweight HTML Editor होता है जिसमे हम HTML, CSS, Javascript, jQuery etc. coding सिख सकते हैं। इसका इस्तेमाल Online Coding Design सिखने के लिए किया जाता हैं। Try editor को Try it editor या Tryit editor भी कहते हैं।
ये Online Coding सिखने और live design update करने का बहुत ही आसान और simple तरीका हैं। यहाँ मैं आपको Try Editor Demo दिखा रहा हूँ आप इसमें HTML, CSS, Javascript coding editing करके देख सकते हैं।
हैं न बहुत ही मजेदार तो चलिए अब जन लेते हैं की इसे कैसे बनाते हैं ताकि आप भी अपनी वेबसाइट और ब्लॉग में Try editor add कर सकें।
Try Editor कैसे और क्यों बनाते है?
दोस्तों सबसे पहले मैं आपको बता दूँ, की Try Editor उन लोगो के काम आता है जो अपनी वेबसाइट में कोडिंग सिखाते है। अब जाहिर सी बात है कुछ लोग बहुत अच्छा सिखाते है लेकिन उनकी एक नादानगी जो उनकी सबसे बड़ी सबसे बड़ी भूल बन जाती है।
वह यह है,की वह लोग अपनी वेबसाइट में Tryit Editor नहीं लगाते जिस कारण सीखने वाले अच्छे से सीख नहीं पाते और एक समय ऐसा भी आता है, की वह लोग उस वेबसाइट से सीखना ही बंद कर देते है।
जिसका परिणाम शब्दों में बया नहीं किया जा सकता । लेकिन दोस्तों अगर आप भी कोडिंग सिखाते है, तो कही आपके साथ ऐसा न हो जाए इससे पहले ही हम आपको Try it Editor बनाना सीखा देंगे। तो आइये जान लेते है, की एक Try Editor कैसे बनाया जाता है।
दोस्तों वैसे तो इस समय वेबसाइट में Try Editor प्रयोग करने हेतू कोई Plugins उपलब्ध नहीं है। परन्तु इसे कोडिंग के माध्यम से आसानी पूर्वक बनाया जा सकता है, जो के निम्न प्रकार है।
<div style="border:1px solid #333;padding:20px;margin-bottom:10px">
<div style="background:#f1574d; color: white;">
<h3 style="color:white;padding:10px;text-align:center">HTML सीखना चाहतें है, तो यहां प्रयास करें!</h3></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Insert HTML inside an iFrame</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
br { display: none; }
textarea, iframe{display: block;margin: 10px 0;width:100%;border: 1px solid #333;}
</style>
<script type="text/javascript">
function updateIframe(){
var myFrame = $("#myframe").contents().find('body');
var textareaValue = $("textarea").val();
myFrame.html(textareaValue);
}
</script>
</head>
<body>
<textarea rows="5" cols="50" placeholder="Type HTML or text here..."></textarea>
<button style="border:0" type="button" onclick="updateIframe()">Run Code </button>
<iframe id="myframe"></iframe><a style="text-align: right; display: block; margin-bottom: -30px;" href="https://www.supportmeindia.com/try-editor-kya-hai-html-try-it-editor-kaise-banaye/" target="_balnk">Try Editor source link</a></body>
</html>
</div>तो दोस्तों इस प्रकार से आप अपनी वेबसाइट में Try Editor लगाकर अपनी वेबसाइट के माध्यम से लोगो को और भी अच्छी तरह से सीखा सकते है।
तो दोस्तों उम्मीद करता हूँ, की अब आप Try it Editor बनाना सिख चुके होंगे। और अगर आपको यह पोस्ट पसंद आया या फिर आपका कोई भी सवाल एवं सुझाव है, तो आप हमें नीचे कमेंट बॉक्स में बता सकते है।
और हो सके तो इस पोस्ट को अपने दोस्तों के साथ शेयर करें ताके वह भी Try Editor के बारे में जान सके, धन्यवाद्