Quer usar um editor online para fazer testes direto pela web? Veja essa ferramenta online, que tem uma coleção de scripts próprios que é capaz de fazer os testes mais básicos de Html – CSS – Javascript – Php e edita Mysql.
O link do editor é
https://www.joemaster.com.br/editor
Use a vontade para testes
Quer ter um desse em seu site?
Segue um modelo básico para usar em seu site
Crie uma pasta com o nome editor e salve esse arquivo abaixo como index.html
<!doctype html>
<html>
<head>
<title>Editor</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width" />
<script src="codemirror.js"></script>
<link rel="stylesheet" href="codemirror.css">
<link rel="stylesheet" href="night.css">
<link rel="stylesheet" href="eclipse.css">
<script src="javascript.js"></script>
<script src="css.js"></script>
<script src="htmlmixed.js"></script>
<script src="xml.js"></script>
<style>
body, html{margin: 0;}
#conteudo{height: 100vh;}
#lateral_a{background-color: #fafafa; padding:5px; width:48%; float:left; border-right:1px solid #bebebe; height: 100vh;}
#lateral_b{padding:5px; width:48%; float:right; height: 100vh;}
.btn{ border-radius:5px;font-size:12px;color:#666;}
#bts{padding:3px;font-size:12px;color:#666;font-family:tahoma;}
.CodeMirror { height: 70vh; border: 1px solid #ddd; margin-bottom:5px;}
.CodeMirror-scroll { max-height: 70vh; }
.CodeMirror pre { padding-left: 7px; line-height: 1.25; }
@media screen and (max-width: 800px) {
#conteudo{height:auto;}
#bts{display:none;}
#lateral_a{padding:2px; width:99%;height:auto; float:none; border-bottom:1px solid #bebebe;}
#lateral_b{padding:2px; width:99%;height:auto; float:none;}
.CodeMirror { height: auto; }
.CodeMirror-scroll { max-height: 200px; }
}
</style>
<script>
var es = 48 ;
var dt = 48 ;
function orientacao(su){
if(su =="esq"){es = es+ 5; dt = dt - 5;
document.getElementById('lateral_b').style.width = es+"%";
document.getElementById('lateral_a').style.width = dt+"%";
}else{es = es - 5; dt = dt+ 5;
document.getElementById('lateral_b').style.width = es+"%";
document.getElementById('lateral_a').style.width = dt+"%";
}
}
function rotate(){
document.getElementById('lateral_b').style.width = "98%";
document.getElementById('lateral_a').style.width = "98%";
document.getElementById('lateral_a').style.height = "auto";
document.getElementById('lateral_b').style.height = "auto";
}
</script>
</head>
<body>
<div id="conteudo">
<div id="lateral_a">
<div align="right" id="bts"><input name="escuro" id="escuro" type="checkbox" value="escuro" onClick="edt();" class="btn">Escuro
<input name="Input" type="button" value="100%" onClick="rotate()" class="btn">
<input name="" type="button" value="<<" onClick="orientacao('esq')" class="btn">
<input name=">>" type="button" value=">>" onClick="orientacao('dir')" class="btn"> </div>
<form style="position: relative; margin-top: .5em;" method="post" action="gerar_codigo.php" target="_blank">
<textarea id="testarcodigo" name="testarcodigo">
<a href="#">
Coloque aqui seu codigo
</a>
</textarea>
<input name="php" type="submit" value="Executar PHP" style="float:left:margin-top:5px;" class="btn">
<input name="html" type="button" value=" executar html/javascript" onClick="document.getElementById('resultado').innerHTML = editor.getValue();" style="float:right;" class="btn">
</form>
</div>
<div id="lateral_b">
<div id="resultado"></div>
</div>
</div>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("testarcodigo"), {
lineNumbers: true,
mode: "css",
matchBrackets: true
});
function edt()
{
if (document.getElementById('escuro').checked) {
editor.setOption("theme","night");} else{editor.setOption("theme","eclipse");}
}
</script>
</body>
</html>
Agora baixe esses arquivos, e salve na mesma pasta editor
https://www.joemaster.com.br/editor/lib/codemirror.css
https://www.joemaster.com.br/editor/lib/codemirror.js
https://www.joemaster.com.br/editor/theme/night.css
https://www.joemaster.com.br/editor/theme/eclipse.css
https://www.joemaster.com.br/editor/mode/javascript/javascript.js
https://www.joemaster.com.br/editor/mode/css/css.js
https://www.joemaster.com.br/editor/mode/htmlmixed/htmlmixed.js
https://www.joemaster.com.br/editor/mode/xml/xml.js
Se quiser só fazer testes de Javascript html e CSS, é só tirar o botão de PHP e o iframe, e já está pronto.
<input name="php" type="submit" value="Executar PHP" style="float:left:margin-top:5px;" class="btn">
Se quiser testar PHP também, tem que deixar esse arquivo gerar_codigo.php na mesma pasta.
O código do php (salve na mesma pasta)
<?php //arquivo restrito //arquivo restrito Solicite esse arquivo por algum contato do site //arquivo restrito ?>
Esse é um modelo básico, para um modelo mais completo igual o meu,
Solicite por algum contato do site.
Até mais.
<< Anterior Como copiar conteúdo completo de um site para acessar offline
Deixe um comentário