nettlebay Posted August 5, 2015 Share Posted August 5, 2015 (edited) le samedi 29 août ASTUCE...[/size] En tapant data:text/html, <html contenteditable> dans la barre de navigation des navigateurs modernes (dont Chrome et Opera) on peut obtenir une page éditable et donc se servir de son navigateur comme simple éditeur de texte ou même comme Editeur HTML WYSIWYG. Pas de grandes options de formatage mais vous pourrez cependant copier, coller du texte et même des images. De plus, on profite ici de l'excellent correcteur orthographique de Chrome ainsi que du menu contextuel. Pour enregistrer votre document sur votre disque: Ctrl+s. Votre document se téléchargera en format HTML. Si vous ouvrez la page enregistrée dans Chrome, vous pourrez continuer à l'éditer et même afficher son code HTML ! (Ctrl+u) ce qui peut être le début d'une page web. On pourra ainsi l'héberger sur sa Dropbox. Exemple: https://dl.dropboxusercontent.com/u/19586410/HTML/dataurl.html Bien sûr, data:text/html, <html contenteditable> peut se mettre en favoris. Et pourquoi pas en faire une WebApp ? Peut-être trouverez-vous d'autres possibilités comme ci-dessous (plus de styles) ? (Il suffit de copier-coller le code ci-dessous dans la barre de navigation puis «Entrée») data:text/html, <html contenteditable><style>body {color: #333; width: 95%; margin: 0 auto; display: block; height: 100%; font-size: 18px; padding: 20px;}</style></html> ou ça? data:text/html,<title>DoJS</title><style type="text/css">#e{font-size: 16px; position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/javascript");</script> Et celui-ci... Pendant que vous tapez votre texte la page change progressivement de couleur...! Complètement inutile, mais rigolo! data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><style type="text/css"> html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; }</style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#ff"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;"> D'autres améliorations ici: https://coderwall.com/p/lhsrcq/one-line-browser-notepad Recherche Google sur ce sujet Je cherche maintenant un cooky a ajouter dans le code pour conserver le texte tapé comme dans certain petits bloc-notes en ligne. Est-ce possible? » oui, y'a un mec qui l'a fait: http://a5.gg/. Cette page se souvient de tout ce que vous avez écrit. En fait, une sorte de tableau blanc qu'il suffit d'effacer si on veut ou de continuer son text plus tard... Pas mal, non? Je vais essayer de l'intégrer dans un site web pour voir si c'est possible... Le code HTML est ici: https://dl.dropboxusercontent.com/u/19586410/HTML/blocnote-in-browser.html. Attention, je ne l'ai pas vérifié intégralement. Ne confiez pas vos secrets à ce truc, on ne sait jamais! Je vais le vérifier et le modifier (peut-être, si j'ai le courage) en hébergeant le tout sur ma Dropbox ou sinon sur mon serveur chez Nerim. LINKS » Une extension pour Opera, probablement sur le même principe: https://addons.opera.com/fr/extensions/details/notepad/?display=en. Mais ça existe certainement pour d'autres navigateurs...» une page peut-être (pas sûr...) sur le même principe avec utilisation de cookies pour conserver le texte dans des post-it... http://romain.parage.free.fr/notes/ et son code-source: https://dl.dropboxusercontent.com/u/19586410/HTML/romain.parage.free.fr_notes_.html (juste pour info et "décorticage" car ne fonctionne pas tel-quel depuis Dropbox... J'essaierai autre chose en stockant moi-même les .js et .css) » Encore un autre... Et celui-là il se souvient de ce que vous avez écrit. Tout est dans l'URL (que vous pourrez modifier éventuellement pour un arrière-plan à votre convenance): data:text/html,<body id='b' c='83'><textarea spellcheck="true" id="t" class="">Tapez%20vos%20Notes%20ici...Elles%20seront%20conservees%0AAttention%2C%20problemes%20avec%20les%20accents!%0AVous%20pouvez%20enregistrer%20la%20page%20en%20HTML%20avec%20Ctrl%2BS%0AMettez%20cette%20page%20en%20favoris%20pour%20la%20retrouver%20facilement!%0A%0A%0A</textarea><script>var f, t=document.getElementById("t"), b=document.body, v=t.value, c=parseInt(b.getAttribute("c")) || t.value.length;t.focus();document.title=t.value.split("\n")[0] || "...";t.className="s";function updateUrl(){clearInterval(f);f=setTimeout(function(){if (v===t.value){return false;}t.className="";t.innerHTML=encodeURIComponent(t.value);var s="data:text/html,<body id='b'";if (!!t.selectionStart){s +=" c='" + t.selectionStart + "'";}s +=">" + b.innerHTML;window.location.href=s;}, 500);}t.addEventListener("keyup", updateUrl);if (!!t.setSelectionRange){t.setSelectionRange(c,c);setTimeout(function(){t.setSelectionRange(c,c);}, 10);}</script><style>textarea{position: fixed;top: 0;left: 0;width: 100%;height: 100%;overflow: auto;margin: 0;padding: 10px;background: black;font: 14px/20px monospace;outline: none;border: none;box-sizing: border-box;cursor: wait;color: gray;}textarea.s{cursor: text;color: white;}</style><!--http://iamnotagoodartist.com/web/an-auto-updating-data-uri-text-editor --> C'est évidemment -comme les précédents- à copier-coller dans votre barre de Nav puis à mettre en Favoris. Edited August 29, 2015 by nettlebay Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now