<!DOCTYPE html>
<html lang="en">
<head>
<meta name="author" content="Oflox" />
<div style="border:1px solid #333;padding:20px;margin-bottom:10px">
<div style="background:#f3dcfb; color: white;">
<h3 style="color:black;padding:10px;text-align:center">HTML EDITOR</h3></div>
<meta charset="UTF-8">
<title>HTML EDITOR</title>
<link href="https://fonts.googleapis.com/css?family=Teko&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://oflox.com/demo/jquery/tryeditor/jquery-1.12.4.min.js"></script>
<style type="text/css">
iframe {
margin-top: 20px;
margin-bottom: 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 4px 4px 14px #000;
-webkit-box-shadow: 4px 4px 14px #000;
box-shadow: 4px 4px 14px #000;
}
.entry a {
color: #1f2024;
}
.divider, .entry hr {
border-top: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
margin: 10px 0 10px;
clear: both;
}
br { display: none; }
textarea, iframe{display: block;margin: 10px 0;width:100%;border: 1px solid #333;}
input,
textarea {
width: 95%;
outline: none;
padding: 0.5rem;
font-size: 1rem;
border: 1px solid #a64dff;
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
font-family: 'Teko', ;
}
#button1{
background-color: #4880ED;
padding: 5px 15px;
border: none;
color: white;
font-size: 10px;
border-radius: 2px;
cursor: pointer;
}
#button2{
background-color: #b30086;
padding: 5px 15px;
border: none;
color: white;
font-size: 10px;
border-radius: 2px;
cursor: pointer;
}
#button3{
background-color: #cc0052;
padding: 5px 15px;
border: none;
color: white;
font-size: 10px;
border-radius: 2px;
cursor: pointer;
}
</style>
<script type="text/javascript">
function updateIframe(){
var myFrame = $("#myframe").contents().find('body');
var textareaValue = $("textarea").val();
myFrame.html(textareaValue);
}
</script>
<script>
function myFunction() {
var copyText = document.getElementById("inputTextToSave");
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}
</script>
<script type="text/javascript">
function saveTextAsFile() {
var textToSave = document.getElementById("inputTextToSave").value; var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"}); var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob); var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value; var downloadLink = document.createElement("a"); downloadLink.download = fileNameToSaveAs; downloadLink.innerHTML = "Download File"; downloadLink.href = textToSaveAsURL; downloadLink.onclick = destroyClickedElement; downloadLink.style.display = "none"; document.body.appendChild(downloadLink); downloadLink.click(); } function destroyClickedElement(event) { document.body.removeChild(event.target); } function loadFileAsText() { var fileToLoad = document.getElementById("fileToLoad").files[0]; var fileReader = new FileReader(); fileReader.onload = function(fileLoadedEvent) { var textFromFileLoaded = fileLoadedEvent.target.result; document.getElementById("inputTextToSave").value = textFromFileLoaded; }; fileReader.readAsText(fileToLoad, "UTF-8"); }
</script>
<script>
</script>
</head>
<body>
<input id="inputFileNameToSaveAs" placeholder="Filename (e.g. Demo.html)"></input>
<textarea class="output" id="inputTextToSave" rows="18" cols="50" placeholder="Type HTML or text here..."></textarea>
<button id="button1" style="border:0" type="button" onclick="updateIframe()">Run Code </button>
<button id="button2" style="border:0" type="button" onclick="myFunction()">Copy Code</button>
<button id="button3" style="border:0" type="button" onclick="saveTextAsFile()">Download Code</button>
<iframe height="400" id="myframe"></iframe>
<hr>
<center>
<a href="https://instagram.com/amitgajare_?igshid=e2e2xrj020u3"><i class="fa fa-instagram" style="font-size:30px;color:red"></i></a>
<footer><small><b>Note :- Downlod Button is Work, Download Your Code. </b></small></footer>
</center>
</body>
</html>