Best Online Tutorials

SQL Tutorial

Free SQL Tutorial

SQL Interview Questions

SQL Practice Questions

SQL Tips & Tricks

SQL Errors

SQL Books

Angular Tutorial

Free Angular Tutorial

Angular Interview Questions

Angular Practice Questions

Angular Tips & Tricks

Angular Errors

Angular Books

Node.js Tutorial

Free Node.js Tutorial

Node.js Interview Questions

Node.js Practice Questions

Node.js Tips & Tricks

Node.js Errors

Node.js Books

React.js Tutorial

Free React.js Tutorial

React.js Interview Questions

React.js Practice Questions

React.js Tips & Tricks

React.js Errors

React.js Books

SSIS Tutorial

Free SSIS Tutorial

SSIS Interview Questions

SSIS Practice Questions

SSIS Tips & Tricks

SSIS Errors

SSIS Books

SEO Tutorial

Free SEO Tutorial

SEO Interview Questions

SEO Practice Questions

SEO Tips & Tricks

SEO Errors

SEO Books

Javascript Tutorial

Free Javascript Tutorial

Javascript Interview Questions

Javascript Practice Questions

Javascript Tips & Tricks

Javascript Errors

Javascript Books

MongoDB Tutorial

Free MongoDB Tutorial

MongoDB Interview Questions

MongoDB Practice Questions

MongoDB Tips & Tricks

MongoDB Errors

MongoDB Books

Next.js Tutorial

Free Next.js Tutorial

Next.js Interview Questions

Next.js Practice Questions

Next.js Tips & Tricks

Next.js Errors

Next.js Books

How to create your own tryit editor with javascript 

Prashant Surya  |   Jan 22, 2020  |  Views: 1176
pictures

Description:

How to create your own tryit editor with JavaScript


Hello guys, in this article we are going to learn how to make our own tryit editor for html , JavaScript and CSS editor to see their output.

What knowledge you need to have as prerequisites in basic:
HTML
CSS
JavaScript

HTML Code::


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row"> 
  <div class="col-md-6 pull-right">
    <input type="button" class="btn btn-default" value="Run" id="run" />
    </div>
  </div>
    <div class="row">
        <div class="col-md-6">
            <textarea id="in"></textarea>
        </div>
        <div class="col-md-6">
            <div id="out"></div>
        </div>
    </div>
</div>


JavaScript Code:


document.getElementById('run').addEventListener('click',function(){
  var text = document.getElementById("in").value;
  var ifr = document.createElement("iframe");
  ifr.setAttribute("frameborder", "0");
  ifr.setAttribute("id", "result");  
  document.getElementById("out").innerHTML = "";
  document.getElementById("out").appendChild(ifr);
  var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument;
  ifrw.document.open();
  ifrw.document.write(text);  
  ifrw.document.close(); 
  if (ifrw.document.body && !ifrw.document.body.isContentEditable) {
    ifrw.document.body.contentEditable = true;
    ifrw.document.body.contentEditable = false;
  }
});

CSS Code:


#out{
  height: 500px;
  width: 100%;
  border: 1px solid gray;
}
#in{
  height: 500px;
  width: 100%;
  border: 1px solid gray;
}



Comments:
Content Contributor
Prashant Surya

Prashant Surya

Software developer at Uniserve Data Technologies Pvt. Ltd.  |   Noida, Uttar Pradesh, India

I am a software developer, freelancer and trainer working on technologies likes. MEAN stack, MERN Stack, ASP.NET full stack, WebRTC, socket.io ,PWA, SQL, JavaScript, jQuery, HTML, CSS, SEO, responsive UI/UX designing... having 7 years of experience in development in multiple domains like, eCommerce, RTA, capital markets, education, real estate...


Read related articles

Different types of design patterns

Prashant Surya  |   Mar 17, 2020  |  Views: 327

Remove duplicates from the string in JavaScript

Prashant Surya  |   Jan 22, 2020  |  Views: 598

On page SEO tips and tricks 2019

Prashant Surya  |   Dec 2, 2019  |  Views: 561

How to secure your website

Prashant Surya  |   Oct 6, 2019  |  Views: 698

Topics to learn in Angular | Angular Tutorial

Prashant Surya  |   Sep 25, 2019  |  Views: 1179

Difference between Angular and React js

Abhishek Roy  |   Sep 25, 2019  |  Views: 1066

How to improve your programming skills

Prashant Surya  |   Sep 12, 2019  |  Views: 702

Want to sell your software ?-

If you want to sell your readymade software to the genuine clients or businessman, list your software with details and demo links.

  • Sell ERP
  • Sell Website Clones
  • Sell App Clones
  • Sell Readymade Portals
  • Sell Readymade Websites
  • Sell Mobile Apps
  • Sell Window Apps

Clients will find it using our advanced search filter and will contact you directly.

No any charge for the product lsiting.

Do you own a Company ?+

Property.sale

Buy or Sell Commercial Property+

Are you a freelancer ?+

Looking for a job ?+

Are you a Service Provider ?+

Are you a blogger ?+

Do you own an IT Institute ?+



Property.sale