Hello friends, my name is Masud Rana and I am the founder of Masud Computer BD, so let's start. Friends, in this post I am going to tell you what is Try Editor. How and why to make Try it Editor. So let's know about making Tryit Editor in this post of ours and adding it to your website blog.
Friends, often you must have seen a Try Editor in a website called W3 School, where you can easily see its output ie its (result) by doing any coding.
But a question in the minds of some people must have created panic. That's how this Try Editor is made. So if this question is also in your mind, then keep reading this post.
What is Try Editor?
Try editor is a lightweight HTML editor in which we use HTML, CSS, Javascript, jQuery etc. Can learn coding. It is used to learn Online Coding Design. Try editor is also called Try it editor or Tryit editor.
This is a very easy and simple way to learn online coding and update live design. Here I am showing you Try Editor Demo , you can try editing HTML, CSS, Javascript coding in it.
It is not very funny, so now let's know how to make it so that you can also add Try editor to your website and blog.
How and why is Try Editor created?
Friends, first of all let me tell you that Try Editor is useful for those people who teach coding in their website. Now it is obvious that some people teach very well, but one of their ignorance becomes their biggest mistake.
That is, those people do not put Tryit Editor in their website, due to which the learners are not able to learn well and there comes a time that they stop learning from that website.
The result of which cannot be described in words. But friends, if you also teach coding, then before this happens to you, we will teach you to make Try it Editor. So let's know, how a Try Editor is made.
Friends, at this time there are no plugins available to use Try Editor in the website. But it can be easily made through coding, which is as follows.
<div style="border: 1px solid rgb(51, 51, 51); margin-bottom: 10px; padding: 20px;">
<div style="background: rgb(241, 87, 77); color: white;">
<h3 style="color: white; padding: 10px; text-align: center;">HTML Masud Computer BD</h3></div>
<html lang="en">
<head>
<title>jQuery Insert HTML inside an iFrame</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://masudcomputerbd.com/jquery.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 cols="50" placeholder="Type HTML or text here..." rows="5"></textarea>
<button onclick="updateIframe()" style="border: 0;" type="button">Run Code </button>
<iframe id="myframe">
</iframe>
<a href="https://www.masudcomputerbd.com/" style="display: block; margin-bottom: -20px; text-align: right;" target="_balnk">Try Editor source link</a>
</body>
</html>
</div>
So friends, in this way you can make people learn better through your website by putting Try Editor in your website.
So friends, I hope that now you have learned to make Try it Editor. And if you liked this post or you have any question and suggestion, then you can tell us in the comment box below.
And if possible, share this post with your friends so that they can also know about Try Editor, thank you
ডোমেইন হোস্টিং সার্ভিস এই লিংকে চাপ দিন ।
ওয়েব ডিজাইন সার্ভিস এই লিংকে চাপ দিন ।
গ্রাফিক্স ডিজাইন সার্ভিস এই লিংকে চাপ দিন ।
ডোমেইন চেকার এই লিংকে চাপ দিন ।
