Editor online de Html – CSS – Javascript – Php e Mysql


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 &nbsp;&nbsp;
      <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.

 

 

 

Categoria: ferramentas úteis | Tags: , , , , , , , | Postado por joemaster em 14/jul/2020

<< Anterior

Próximo >>

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *