Aller au contenu
ElementaryOS France
nettlebay

ASTUCE: votre navigateur comme Bloc-Notes (Améliorations)

Recommended Posts

modifi%C3%A9.jpg le samedi 29 août
 
sourire.gif 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.
 

xTwJU1o.png

 

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.

Modifié par nettlebay

Partager ce message


Lien à poster
Partager sur d’autres sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Invité
Répondre à ce sujet…

×   Vous avez collé du contenu avec mise en forme.   Supprimer la mise en forme

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Créer...