![\"\"](\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/editor-online-de-html-css-javascript-php-e-mysql.jpg\")
<\/p>\nQuer usar um editor online para fazer testes direto pela web? Veja essa ferramenta online, que tem uma\u00a0 cole\u00e7\u00e3o de\u00a0 scripts pr\u00f3prios\u00a0 que \u00e9 capaz de fazer os testes mais b\u00e1sicos de Html – CSS – Javascript – Php e\u00a0 edita Mysql.<\/p>\n
<\/p>\n
<\/p>\n
O link do editor \u00e9<\/p>\n
https:\/\/www.joemaster.com.br\/editor<\/a><\/p>\n Use a vontade para testes<\/p>\n Quer ter um desse em seu site?<\/p>\n Segue um modelo b\u00e1sico para usar em seu site<\/p>\n Crie uma pasta com o nome editor <\/strong>e salve esse arquivo abaixo como index.html<\/strong><\/p>\n Agora baixe esses arquivos, e salve na mesma pasta editor<\/strong><\/p>\n https:\/\/www.joemaster.com.br\/editor\/lib\/codemirror.css<\/a><\/p>\n https:\/\/www.joemaster.com.br\/editor\/lib\/codemirror.js<\/a><\/p>\n https:\/\/www.joemaster.com.br\/editor\/theme\/night.css<\/a><\/p>\n https:\/\/www.joemaster.com.br\/editor\/theme\/eclipse.css<\/a><\/p>\n https:\/\/www.joemaster.com.br\/editor\/mode\/javascript\/javascript.js<\/a><\/p>\n https:\/\/www.joemaster.com.br\/editor\/mode\/css\/css.js<\/a><\/p>\n https:\/\/www.joemaster.com.br\/editor\/mode\/htmlmixed\/htmlmixed.js<\/a><\/p>\n<!doctype html>\r\n<html>\r\n<head>\r\n<title>Editor<\/title>\r\n<meta charset=\"utf-8\"\/>\r\n<meta name=\"viewport\" content=\"width=device-width\" \/>\r\n<script src=\"codemirror.js\"><\/script>\r\n<link rel=\"stylesheet\" href=\"codemirror.css\">\r\n<link rel=\"stylesheet\" href=\"night.css\">\r\n<link rel=\"stylesheet\" href=\"eclipse.css\">\r\n<script src=\"javascript.js\"><\/script>\r\n<script src=\"css.js\"><\/script>\r\n<script src=\"htmlmixed.js\"><\/script>\r\n<script src=\"xml.js\"><\/script>\r\n<style>\r\n\r\n body, html{margin: 0;} \r\n #conteudo{height: 100vh;}\r\n #lateral_a{background-color: #fafafa; padding:5px; width:48%; float:left; border-right:1px solid #bebebe; height: 100vh;}\r\n #lateral_b{padding:5px; width:48%; float:right; height: 100vh;}\r\n .btn{ border-radius:5px;font-size:12px;color:#666;}\r\n #bts{padding:3px;font-size:12px;color:#666;font-family:tahoma;}\r\n .CodeMirror { height: 70vh; border: 1px solid #ddd; margin-bottom:5px;}\r\n .CodeMirror-scroll { max-height: 70vh; }\r\n .CodeMirror pre { padding-left: 7px; line-height: 1.25; }\r\n \r\n \r\n @media screen and (max-width: 800px) {\r\n #conteudo{height:auto;}\r\n #bts{display:none;}\r\n #lateral_a{padding:2px; width:99%;height:auto; float:none; border-bottom:1px solid #bebebe;}\r\n #lateral_b{padding:2px; width:99%;height:auto; float:none;}\r\n .CodeMirror { height: auto; }\r\n .CodeMirror-scroll { max-height: 200px; }\r\n } \r\n<\/style>\r\n\r\n<script>\r\nvar es = 48 ;\r\nvar dt = 48 ;\r\nfunction orientacao(su){\r\nif(su ==\"esq\"){es = es+ 5; dt = dt - 5;\r\ndocument.getElementById('lateral_b').style.width = es+\"%\";\r\ndocument.getElementById('lateral_a').style.width = dt+\"%\";\r\n}else{es = es - 5; dt = dt+ 5;\r\ndocument.getElementById('lateral_b').style.width = es+\"%\";\r\ndocument.getElementById('lateral_a').style.width = dt+\"%\";\r\n}\r\n} \r\n\r\nfunction rotate(){\r\ndocument.getElementById('lateral_b').style.width = \"98%\";\r\ndocument.getElementById('lateral_a').style.width = \"98%\";\r\ndocument.getElementById('lateral_a').style.height = \"auto\";\r\ndocument.getElementById('lateral_b').style.height = \"auto\";\r\n\r\n\r\n} \r\n \r\n<\/script>\r\n<\/head>\r\n<body>\r\n<div id=\"conteudo\">\r\n <div id=\"lateral_a\">\r\n<div align=\"right\" id=\"bts\"><input name=\"escuro\" id=\"escuro\" type=\"checkbox\" value=\"escuro\" onClick=\"edt();\" class=\"btn\">Escuro \r\n <input name=\"Input\" type=\"button\" value=\"100%\" onClick=\"rotate()\" class=\"btn\">\r\n <input name=\"\" type=\"button\" value=\"<<\" onClick=\"orientacao('esq')\" class=\"btn\"> \r\n <input name=\">>\" type=\"button\" value=\">>\" onClick=\"orientacao('dir')\" class=\"btn\"> <\/div>\r\n \r\n <form style=\"position: relative; margin-top: .5em;\" method=\"post\" action=\"gerar_codigo.php\" target=\"_blank\">\r\n <textarea id=\"testarcodigo\" name=\"testarcodigo\">\r\n <a href=\"#\">\r\n Coloque aqui seu codigo\r\n <\/a>\r\n <\/textarea>\r\n <input name=\"php\" type=\"submit\" value=\"Executar PHP\" style=\"float:left:margin-top:5px;\" class=\"btn\">\r\n <input name=\"html\" type=\"button\" value=\" executar html\/javascript\" onClick=\"document.getElementById('resultado').innerHTML = editor.getValue();\" style=\"float:right;\" class=\"btn\"> \r\n\r\n <\/form>\r\n <\/div>\r\n <div id=\"lateral_b\">\r\n <div id=\"resultado\"><\/div>\r\n <\/div> \r\n <\/div>\r\n \r\n <script>\r\n var editor = CodeMirror.fromTextArea(document.getElementById(\"testarcodigo\"), {\r\n lineNumbers: true,\r\n mode: \"css\",\r\n matchBrackets: true\r\n });\r\n \r\n function edt()\r\n {\r\n if (document.getElementById('escuro').checked) {\t\r\n editor.setOption(\"theme\",\"night\");} else{editor.setOption(\"theme\",\"eclipse\");}\r\n }\t\r\n <\/script>\r\n\r\n<\/body>\r\n <\/html><\/pre>\n